/* ============================================================
   mea-web page styles — modeled on design-system/reference/
   02-layout.css (@layer layout: structure only, not one color)
   and 03-design.css (@layer design: paint only, every value a
   token). Zero hardcoded hex (D10) — a test gates this file.
   ============================================================ */

/* ──────────────────────────────────────────────────────────────
   Citizen (participant) dark identity at BODY scope.
   The production theme (frontend/app/theme.css) scopes the dark
   --t-* rebind to `body.citizen-theme .app-screen` so the SPA's
   desk shell stays light. mea-web renders one role per request, so
   the WHOLE participant page — shell included — is dark; we promote
   the same dark token palette to body scope (covering the shell
   tokens .app-screen omits, e.g. --t-topbar-bg). Token-only (D10).
   ────────────────────────────────────────────────────────────── */
@layer theme {
  body.citizen-theme {
    --t-bg: var(--mea-dark);
    --t-bg-elevated: var(--mea-card-dark);
    --t-bg-recessed: var(--mea-dark-2);
    --t-bg-active: var(--mea-navy-mid);
    --t-text: var(--mea-white);
    --t-text-secondary: var(--mea-cg-3);
    --t-text-muted: var(--mea-cg-4);
    --t-border: var(--mea-navy-light);
    --t-card-bg: var(--mea-card-dark);
    --t-card-border: var(--mea-navy-light);
    --t-topbar-bg: var(--mea-dark-2);
    --t-accent: var(--mea-blue-bright);
    --t-accent-hover: var(--mea-blue);
    --t-accent-text: var(--mea-white);
    --t-success: var(--mea-green-mobile);
    --t-success-text: var(--mea-green-mobile);
    --t-warning: var(--mea-amber);
    --t-warning-text: var(--mea-amber);
    --t-error: var(--mea-red);
    --t-link: var(--mea-baby-blue);
    --t-link-hover: var(--mea-baby-mid);
    --t-border-focus: var(--mea-baby-blue);
  }
}

/* ──────────────────────────────────────────────────────────────
   @layer layout — STRUCTURE ONLY.
   ────────────────────────────────────────────────────────────── */
@layer layout {

  body {
    font-family: var(--mea-font-citizen-body);
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  /* Skip link (a11y): visually hidden until focused, then revealed at the
     top-left above all content so keyboard users can jump past the appbar
     straight to <main id="main">. Structure only here; paint in @layer design. */
  .skip-link {
    position: absolute;
    top: var(--mea-space-2);
    left: var(--mea-space-2);
    z-index: var(--mea-z-top);
    padding: var(--mea-space-2) var(--mea-space-4);
    border-radius: var(--mea-radius-md);
    text-decoration: none;
    transform: translateY(-200%);
  }
  .skip-link:focus,
  .skip-link:focus-visible {
    transform: translateY(0);
  }

  .appbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mea-space-4);
    padding: var(--mea-space-4) var(--mea-gutter-mobile-l);
  }
  .appbar__session { display: flex; }

  .page {
    width: 100%;
    max-width: var(--mea-app-max-w);
    margin: 0 auto;
    padding: var(--mea-space-4) var(--mea-gutter-mobile) var(--mea-space-12);
    display: grid;
    gap: var(--mea-space-6);
    align-content: start;
    container-type: inline-size;
  }
  /* Responsive shell width. The mobile token (430px) is the phone-first base;
     widen on larger viewports so desk dashboards and tables use the space.
     `.page` is the container-query context, so until it widens, every
     `@container (max-width: …)` rule in the app sheets matches and collapses
     each layout to one column — which is why the cap must scale. The -tablet
     and -desktop tokens already exist in tokens.css; this wires them.
     Participant (citizen) views stay phone-to-tablet width by design
     (D11 mobile-first, D12 trauma-informed / max 3 actions). */
  @media (min-width: 48rem) {
    .page { max-width: var(--mea-app-max-w-tablet); }
  }
  @media (min-width: 75rem) {
    .page { max-width: var(--mea-app-max-w-desktop); }
    body.citizen-theme .page { max-width: var(--mea-app-max-w-tablet); }
  }
  .page__title { font-size: var(--mea-text-2xl); line-height: var(--mea-lh-tight); }

  .panel { display: grid; gap: var(--mea-space-3); }
  .panel__title { font-size: var(--mea-text-lg); }
  .panel__hint, .panel__title { line-height: var(--mea-lh-snug); }

  /* Sign-in / verify forms — a narrow centered card; they must NOT stretch to
     the wide desk `.page` width on desktop (tables are wide, auth forms are not). */
  .signin { padding-top: var(--mea-space-8); max-width: 28rem; margin-inline: auto; width: 100%; }
  .form { display: grid; gap: var(--mea-space-4); }
  .form__field { display: grid; gap: var(--mea-space-1); }
  .form__label { font-size: var(--mea-text-sm); }
  .form__input {
    min-height: var(--t-target-min);
    padding: var(--mea-space-2) var(--mea-space-3);
    border-radius: var(--mea-radius-md);
    border: 1px solid;
    font: inherit;
    width: 100%;
  }
  .form-error { padding: var(--mea-space-3); border-radius: var(--mea-radius-md); border: 1px solid; }
  .notice { display: grid; gap: var(--mea-space-2); padding: var(--mea-space-4); border-radius: var(--mea-radius-lg); border: 1px solid; }
  .notice__title { font-size: var(--mea-text-md); line-height: var(--mea-lh-snug); }
  .notice__body { font-size: var(--mea-text-sm); line-height: var(--mea-lh-normal); }

  /* Program card */
  .deals { display: grid; gap: var(--mea-space-3); }
  .case { display: grid; gap: var(--mea-space-2); padding: var(--mea-space-5); border-radius: var(--mea-radius-2xl); }
  .progress {
    inline-size: 100%;
    block-size: 6px;
    border-radius: var(--mea-radius-pill);
    overflow: hidden;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
  }
  .progress::-webkit-progress-bar { border-radius: var(--mea-radius-pill); }

  /* Task list */
  .task-list { display: grid; gap: var(--mea-space-3); }
  .task {
    display: grid;
    gap: var(--mea-space-1) var(--mea-space-4);
    padding: var(--mea-space-4);
    border-radius: var(--mea-radius-lg);
  }
  .task__name  { font-size: var(--mea-text-md); font-weight: var(--mea-w-bold); }
  .task__where { font-size: var(--mea-text-sm); }
  .task__when  { font-size: var(--mea-text-sm); }
  .task__meta  { font-size: var(--mea-text-xs); }

  /* Notifications */
  .notifications { display: grid; gap: var(--mea-space-3); }
  .notification-list { display: grid; gap: var(--mea-space-2); }
  .notification {
    display: grid;
    gap: var(--mea-space-1);
    padding: var(--mea-space-3) var(--mea-space-4);
    border-radius: var(--mea-radius-lg);
    border-inline-start: 3px solid;
  }
  .notification__message { font-size: var(--mea-text-sm); line-height: var(--mea-lh-normal); }
  .notification__when { font-size: var(--mea-text-xs); }

  /* Boundary + error pages */
  .boundary, .error-page { padding-top: var(--mea-space-8); }
  .boundary__body, .error-page__body { font-size: var(--mea-text-base); line-height: var(--mea-lh-normal); }
  .error-page__code { font-size: var(--mea-text-hero); font-weight: var(--mea-w-extrabold); line-height: var(--mea-lh-tight); }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--t-target-min);
    padding: var(--mea-space-3) var(--mea-space-5);
    border: 0; border-radius: var(--mea-radius-pill);
  }
  .btn--quiet { min-height: var(--t-target-min); padding: var(--mea-space-2) var(--mea-space-4); border: 1px solid; }

  /* Footer language switch (plain form post — zen law) */
  .appfooter {
    display: flex;
    justify-content: center;
    padding: var(--mea-space-4) var(--mea-gutter-mobile);
  }
  .lang-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--mea-space-2);
  }
  .lang-form__label { font-size: var(--mea-text-sm); }
  .lang-form__select {
    min-height: var(--t-target-min);
    padding: var(--mea-space-2) var(--mea-space-3);
    border-radius: var(--mea-radius-md);
    border: 1px solid;
    font: inherit;
  }
}

/* ──────────────────────────────────────────────────────────────
   @layer design — PAINT ONLY. Every value a token (D10).
   ────────────────────────────────────────────────────────────── */
@layer design {

  body { background: var(--t-bg); color: var(--t-text); }

  /* Skip link paint: token-styled accent pill, visible against any theme. */
  .skip-link { background: var(--t-accent); color: var(--t-accent-text); font-weight: var(--mea-w-bold); }
  .skip-link:focus, .skip-link:focus-visible { outline: 2px solid var(--t-border-focus); outline-offset: 2px; }

  .appbar { background: var(--t-topbar-bg); border-bottom: 1px solid var(--t-border); }
  .appbar__brand { font-family: var(--mea-font-heading); font-weight: var(--mea-w-extrabold);
                   letter-spacing: var(--mea-ls-wide); color: var(--t-accent); }

  .page__title { font-family: var(--mea-font-citizen); font-weight: var(--mea-w-extrabold);
                 letter-spacing: var(--mea-ls-tight); }
  .panel__title { font-family: var(--mea-font-citizen); font-weight: var(--mea-w-bold); }
  .panel__hint  { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }

  .form__label { color: var(--t-text-secondary); font-weight: var(--mea-w-semibold); }
  .form__input { background: var(--t-bg-elevated); border-color: var(--t-border); color: var(--t-text); }
  .form__input:focus-visible { border-color: var(--t-border-focus); }
  .form-error { background: var(--t-bg-elevated); border-color: var(--t-warning); color: var(--t-text); }
  .notice { background: var(--t-bg-elevated); border-color: var(--t-border); }
  .notice__title { color: var(--t-text); font-weight: var(--mea-w-bold); }
  .notice__body { color: var(--t-text-secondary); }

  .case { background: var(--t-card-bg); border: 1px solid var(--t-card-border); box-shadow: var(--mea-shadow-card); }
  .case__eyebrow { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold);
                   text-transform: uppercase; letter-spacing: var(--mea-ls-caps); color: var(--t-text-muted); }
  .case__title  { font-family: var(--mea-font-citizen); font-size: var(--mea-text-3xl);
                  font-weight: var(--mea-w-extrabold); letter-spacing: var(--mea-ls-tight); }
  .case__status { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }

  .progress { background: var(--t-bg-active); }
  .progress::-webkit-progress-bar { background: var(--t-bg-active); }
  .progress::-webkit-progress-value { background: var(--t-success); }
  .progress::-moz-progress-bar { background: var(--t-success); }

  .task { background: var(--t-card-bg); border: 1px solid var(--t-card-border); }
  .task__name  { color: var(--t-text); }
  .task__where { color: var(--t-text-muted); }
  .task__when  { color: var(--t-text-secondary); }
  .task__meta  { color: var(--t-text-muted); font-weight: var(--mea-w-semibold); }
  .task--booked  { border-color: var(--t-success); }
  .task--booked .task__meta { color: var(--t-success-text); }
  .task--overdue { border-color: var(--t-warning); }
  .task--overdue .task__meta { color: var(--t-warning); }

  .notification { background: var(--t-card-bg); border-color: var(--t-card-border); }
  .notification--unread { border-inline-start-color: var(--t-accent); }
  .notification__message { color: var(--t-text); }
  .notification__when { color: var(--t-text-muted); }

  .boundary__body, .error-page__body { color: var(--t-text-secondary); }
  .error-page__code { color: var(--t-text-muted); }

  /* Participant CTA: the royal-blue gradient pill (RECONCILIATION-2026-06-09
     — the accent family is the --mea-grad-cta gradient, NOT baby-blue fills). */
  .btn--primary { background: var(--mea-grad-cta); color: var(--mea-white);
                  font-weight: var(--mea-w-bold); box-shadow: var(--mea-shadow-btn); }
  .btn--primary:active { transform: translateY(1px); }
  .btn--quiet { background: var(--t-bg-elevated); border-color: var(--t-border);
                color: var(--t-text-secondary); font-weight: var(--mea-w-semibold); }

  .link { color: var(--t-link); font-weight: var(--mea-w-semibold); }
  .link:hover { color: var(--t-link-hover); }

  .appfooter { border-top: 1px solid var(--t-border); }
  .lang-form__label { color: var(--t-text-secondary); font-weight: var(--mea-w-semibold); }
  .lang-form__select { background: var(--t-bg-elevated); border-color: var(--t-border); color: var(--t-text); }
  .lang-form__select:focus-visible { border-color: var(--t-border-focus); }
}

/* ──────────────────────────────────────────────────────────────
   Wave 1 — desk-role dashboards. STRUCTURE ONLY in @layer layout;
   paint follows in @layer design below. The SPA's JS-sized visuals
   (donut, trend bars, caseload bars) are native <meter> elements
   plus per-bucket count text: no inline styles, no scripts.
   ────────────────────────────────────────────────────────────── */
@layer layout {

  .dashboard { display: grid; gap: var(--mea-space-6); }
  .dashboard__intro { display: grid; gap: var(--mea-space-1); }
  .dashboard__title { font-size: var(--mea-text-2xl); line-height: var(--mea-lh-tight); }
  .dashboard__subtitle { font-size: var(--mea-text-sm); }

  .metric-row { display: grid; gap: var(--mea-space-3); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .metric {
    display: grid;
    gap: var(--mea-space-1);
    padding: var(--mea-space-4);
    border-radius: var(--mea-radius-lg);
    border: 1px solid;
    text-decoration: none;
  }
  .metric__label { font-size: var(--mea-text-xs); text-transform: uppercase; letter-spacing: var(--mea-ls-caps); }
  .metric__value { font-size: var(--mea-text-2xl); font-weight: var(--mea-w-extrabold); line-height: var(--mea-lh-tight); }
  .metric__sub { font-size: var(--mea-text-xs); }

  .dashboard-columns { display: grid; gap: var(--mea-space-6); align-items: start; }
  @media (min-width: 56rem) {
    .dashboard-columns { grid-template-columns: 3fr 2fr; }
  }
  .dashboard-columns__col { display: grid; gap: var(--mea-space-6); align-content: start; }

  .dashboard-panel {
    display: grid;
    gap: var(--mea-space-3);
    padding: var(--mea-space-4);
    border-radius: var(--mea-radius-lg);
    border: 1px solid;
  }
  .dashboard-panel__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mea-space-3); }
  .dashboard-panel__title { font-size: var(--mea-text-md); }
  .dashboard-panel__meta, .dashboard-panel__link { font-size: var(--mea-text-sm); }
  .panel-empty { padding: var(--mea-space-4) 0; text-align: center; }

  .case-table { width: 100%; border-collapse: collapse; font-size: var(--mea-text-sm); }
  .case-table th { text-align: left; padding: var(--mea-space-2); font-size: var(--mea-text-xs); text-transform: uppercase; letter-spacing: var(--mea-ls-caps); }
  .case-table td { padding: var(--mea-space-2); border-top: 1px solid; vertical-align: middle; }
  .case-table__meta { white-space: nowrap; }
  .case-table__link { text-decoration: none; display: inline-block; }

  .person-cell { display: inline-flex; align-items: center; gap: var(--mea-space-2); }
  .person-cell__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--mea-space-8); height: var(--mea-space-8); flex: none;
    border-radius: var(--mea-radius-circle);
    font-size: var(--mea-text-xs); font-weight: var(--mea-w-bold);
  }
  .person-cell__detail { display: grid; }
  .person-cell__name { font-weight: var(--mea-w-semibold); }
  .person-cell__sub { font-size: var(--mea-text-xs); }

  .charge-tag, .case-badge, .status-badge {
    display: inline-block;
    padding: var(--mea-space-1) var(--mea-space-2);
    border-radius: var(--mea-radius-pill);
    font-size: var(--mea-text-xs);
    font-weight: var(--mea-w-semibold);
    white-space: nowrap;
  }

  /* Officer */
  .officer-profile { display: flex; align-items: center; gap: var(--mea-space-3); flex-wrap: wrap; }
  .officer-profile__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--mea-space-10); height: var(--mea-space-10); flex: none;
    border-radius: var(--mea-radius-circle);
    font-weight: var(--mea-w-bold);
  }
  .officer-profile__info { display: grid; flex: 1; min-width: 10rem; }
  .officer-profile__name { font-size: var(--mea-text-xl); line-height: var(--mea-lh-tight); }
  .officer-profile__badge { font-size: var(--mea-text-sm); }
  .issue-group__heading { font-size: var(--mea-text-xs); text-transform: uppercase; letter-spacing: var(--mea-ls-caps); padding-top: var(--mea-space-2); }
  .issue-list { display: grid; gap: var(--mea-space-2); }
  .issue-row { display: flex; align-items: center; justify-content: space-between; gap: var(--mea-space-3); padding: var(--mea-space-2) 0; border-top: 1px solid; }
  .issue-row__main { display: grid; gap: var(--mea-space-1); }
  .issue-row__name { font-weight: var(--mea-w-semibold); }
  .issue-row__detail { font-size: var(--mea-text-sm); }
  .issue-row__link { text-decoration: none; }

  /* Prosecutor: courts, outcomes, activity, drill panel */
  .court-tabs { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); }
  .court-tab {
    display: inline-flex; align-items: center;
    min-height: var(--t-target-min);
    padding: var(--mea-space-1) var(--mea-space-3);
    border-radius: var(--mea-radius-pill);
    border: 1px solid;
    text-decoration: none;
    font-size: var(--mea-text-sm);
  }
  .court-info { display: grid; gap: var(--mea-space-2); padding-top: var(--mea-space-2); }
  .court-info__pair { display: flex; justify-content: space-between; gap: var(--mea-space-3); }
  .court-info__value { font-weight: var(--mea-w-bold); }

  .outcome-total { display: flex; align-items: baseline; gap: var(--mea-space-2); }
  .outcome-total__value { font-size: var(--mea-text-3xl); font-weight: var(--mea-w-extrabold); }
  .outcome-total__label { font-size: var(--mea-text-sm); }
  .chart-legend { display: grid; gap: var(--mea-space-2); }
  .chart-legend__item { display: flex; align-items: center; gap: var(--mea-space-2); }
  .chart-legend__dot { width: var(--mea-space-2); height: var(--mea-space-2); flex: none; border-radius: var(--mea-radius-circle); }
  .chart-legend__label { flex: 1; font-size: var(--mea-text-sm); }
  .chart-legend__meter { flex: 1; min-width: 4rem; }
  .chart-legend__value { font-weight: var(--mea-w-bold); font-variant-numeric: tabular-nums; }

  .trend-list { display: grid; gap: var(--mea-space-2); }
  .trend-day { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: var(--mea-space-2); }
  .trend-day__label { font-size: var(--mea-text-xs); font-weight: var(--mea-w-semibold); }
  .trend-day__meter { width: 100%; }
  .trend-day__counts { font-size: var(--mea-text-xs); white-space: nowrap; }

  .drill-panel { display: grid; gap: var(--mea-space-3); padding: var(--mea-space-4); border-radius: var(--mea-radius-lg); border: 1px solid; }
  .drill-list { display: grid; gap: var(--mea-space-2); }
  .drill-row { display: flex; align-items: center; justify-content: space-between; gap: var(--mea-space-3); padding: var(--mea-space-2) 0; border-top: 1px solid; }
  .drill-row__main { display: flex; align-items: center; gap: var(--mea-space-2); flex-wrap: wrap; }
  .drill-row__name { font-weight: var(--mea-w-semibold); }
  .drill-row__meta { font-size: var(--mea-text-sm); }
  .drill-row__time { font-weight: var(--mea-w-bold); font-variant-numeric: tabular-nums; }
  .drill-empty { padding: var(--mea-space-3) 0; text-align: center; }

  /* Senior prosecutor */
  .savings-hero { display: grid; gap: var(--mea-space-4); padding: var(--mea-space-5); border-radius: var(--mea-radius-2xl); }
  .savings-hero__amount { font-size: var(--mea-text-4xl); font-weight: var(--mea-w-extrabold); line-height: var(--mea-lh-tight); }
  .savings-hero__label { font-size: var(--mea-text-sm); text-transform: uppercase; letter-spacing: var(--mea-ls-caps); }
  .savings-hero__basis { font-size: var(--mea-text-sm); }
  .savings-hero__metrics { display: flex; gap: var(--mea-space-6); padding-top: var(--mea-space-2); }
  .savings-hero__metric { display: grid; }
  .savings-hero__metric-value { font-size: var(--mea-text-xl); font-weight: var(--mea-w-bold); }
  .savings-hero__metric-label { font-size: var(--mea-text-xs); }

  .caseload-chart { display: grid; gap: var(--mea-space-2); }
  .caseload-bar { display: grid; grid-template-columns: minmax(6rem, auto) 1fr auto; align-items: center; gap: var(--mea-space-2); }
  .caseload-bar__label { font-size: var(--mea-text-sm); }
  .caseload-bar__meter { width: 100%; }
  .caseload-bar__value { font-weight: var(--mea-w-bold); font-variant-numeric: tabular-nums; }

  .cost-list { display: grid; gap: var(--mea-space-2); }
  .cost-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--mea-space-3); padding: var(--mea-space-2) 0; border-top: 1px solid; }
  .cost-row__label { font-size: var(--mea-text-sm); }
  .cost-row__value { font-weight: var(--mea-w-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* Shared lists (events, sessions, providers) */
  .event-list { display: grid; gap: var(--mea-space-2); }
  .event { display: grid; gap: var(--mea-space-1); padding: var(--mea-space-2) 0; border-top: 1px solid; }
  .event__time { font-size: var(--mea-text-xs); }
  .event__actor { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); }
  .event__action { font-size: var(--mea-text-sm); }

  .session-list { display: grid; gap: var(--mea-space-2); }
  .session-item { display: flex; align-items: center; justify-content: space-between; gap: var(--mea-space-3); padding: var(--mea-space-2) 0; border-top: 1px solid; }
  .session-item__info { display: grid; gap: var(--mea-space-1); }
  .session-item__name { font-weight: var(--mea-w-semibold); }
  .session-item__type { font-size: var(--mea-text-sm); }
  .session-item__time { font-size: var(--mea-text-sm); white-space: nowrap; }
  .session-item__link { text-decoration: none; }

  .provider-summary { display: flex; gap: var(--mea-space-6); }
  .provider-summary__stat { display: grid; gap: var(--mea-space-1); }
  .provider-summary__label { font-size: var(--mea-text-xs); text-transform: uppercase; letter-spacing: var(--mea-ls-caps); }
  .provider-summary__value { font-size: var(--mea-text-2xl); font-weight: var(--mea-w-extrabold); }
}

/* Wave 1 — desk dashboards: PAINT ONLY, every value a token (D10). */
@layer design {

  .dashboard__subtitle { color: var(--t-text-secondary); }
  .dashboard__title { font-family: var(--mea-font-heading); font-weight: var(--mea-w-extrabold); }

  .metric { background: var(--t-card-bg); border-color: var(--t-card-border); }
  .metric--link { color: inherit; }
  .metric--link:hover { border-color: var(--t-border-focus); }
  .metric__label { color: var(--t-text-muted); font-weight: var(--mea-w-semibold); }
  .metric__sub { color: var(--t-text-secondary); }
  .metric__value--green { color: var(--t-success-text); }
  .metric__value--amber { color: var(--mea-amber-dark); }
  .metric__value--red { color: var(--mea-red-dark); }
  .metric__value--blue { color: var(--mea-blue); }

  .dashboard-panel, .drill-panel { background: var(--t-card-bg); border-color: var(--t-card-border); box-shadow: var(--mea-shadow-card); }
  .dashboard-panel__title { font-family: var(--mea-font-heading); font-weight: var(--mea-w-bold); }
  .dashboard-panel__meta { color: var(--t-text-muted); }
  .dashboard-panel__link { color: var(--t-link); font-weight: var(--mea-w-semibold); }
  .dashboard-panel__link:hover { color: var(--t-link-hover); }
  .panel-empty, .drill-empty { color: var(--t-text-muted); }

  .case-table th { color: var(--t-text-muted); }
  .case-table td { border-top-color: var(--t-border); }
  .case-table__meta { color: var(--t-text-secondary); }
  .case-table__link { color: inherit; }
  .case-table__link:hover .person-cell__name { color: var(--t-link); }

  .person-cell__avatar { background: var(--t-bg-active); color: var(--t-text-secondary); }
  .person-cell__sub { color: var(--t-text-muted); }

  .charge-tag { background: var(--t-bg-active); color: var(--t-text-secondary); }
  .charge-tag--drug { background: var(--mea-violet-light); color: var(--mea-violet); }
  .charge-tag--theft { background: var(--mea-amber-light); color: var(--mea-amber-dark); }
  .charge-tag--property { background: var(--mea-orange-light); color: var(--mea-orange-dark); }
  .charge-tag--conduct { background: var(--mea-blue-50); color: var(--mea-blue-dark); }
  .charge-tag--dui { background: var(--mea-red-light); color: var(--mea-red-dark); }
  .charge-tag--trespass { background: var(--mea-teal-light); color: var(--mea-teal-dark); }
  .charge-tag--assault { background: var(--mea-red-light); color: var(--mea-red-dark); }

  .case-badge, .status-badge { background: var(--t-bg-active); color: var(--t-text-secondary); }
  .case-badge--approved, .case-badge--accepted, .case-badge--completed, .case-badge--active,
  .status-badge--approved, .status-badge--accepted, .status-badge--completed {
    background: var(--mea-green-light); color: var(--mea-green-dark);
  }
  .case-badge--pending, .case-badge--pending_review, .case-badge--submitted, .case-badge--in_progress, .case-badge--under_review, .case-badge--review,
  .status-badge--pending, .status-badge--new, .status-badge--review, .status-badge--referred {
    background: var(--mea-amber-light); color: var(--mea-amber-dark);
  }
  .case-badge--denied, .case-badge--closed, .case-badge--failed, .case-badge--overdue, .case-badge--missed,
  .status-badge--denied {
    background: var(--mea-red-light); color: var(--mea-red-dark);
  }

  .officer-profile__avatar { background: var(--mea-grad-officer); color: var(--mea-white); }
  .officer-profile__name { font-family: var(--mea-font-heading); font-weight: var(--mea-w-bold); }
  .officer-profile__badge { color: var(--t-text-muted); }
  .issue-group__heading { color: var(--t-text-muted); }
  .issue-row { border-top-color: var(--t-border); }
  .issue-row__detail { color: var(--t-text-secondary); }
  .issue-row__link { color: inherit; }
  .issue-row__link:hover { color: var(--t-link); }

  .court-tab { background: var(--t-bg-elevated); border-color: var(--t-border); color: var(--t-text-secondary); }
  .court-tab--active { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-accent-text); }
  .court-info__label { color: var(--t-text-secondary); }

  .outcome-total__label { color: var(--t-text-muted); }
  .chart-legend__label { color: var(--t-text-secondary); }
  .chart-legend__dot--green { background: var(--mea-green); }
  .chart-legend__dot--red { background: var(--mea-red); }
  .chart-legend__dot--amber { background: var(--mea-amber); }
  .chart-legend__dot--baby-blue { background: var(--mea-baby-blue); }
  .chart-legend__dot--blue { background: var(--mea-blue); }
  .chart-legend__dot--gray { background: var(--mea-gray-400); }

  .trend-day__label { color: var(--t-text-secondary); }
  .trend-day__counts { color: var(--t-text-muted); }

  .drill-row { border-top-color: var(--t-border); }
  .drill-row__meta { color: var(--t-text-secondary); }

  .savings-hero { background: var(--mea-grad-blue); color: var(--mea-white); }
  .savings-hero__label, .savings-hero__basis, .savings-hero__metric-label { color: var(--mea-baby-pale); }

  .caseload-bar__label { color: var(--t-text-secondary); }

  .cost-row { border-top-color: var(--t-border); }
  .cost-row__label { color: var(--t-text-secondary); }
  .cost-row__value--diversion { color: var(--t-success-text); }
  .cost-row--savings .cost-row__label, .cost-row__value--savings { color: var(--t-success-text); font-weight: var(--mea-w-bold); }

  .event { border-top-color: var(--t-border); }
  .event__time { color: var(--t-text-muted); }
  .event__action { color: var(--t-text-secondary); }
  .event__resource { font-weight: var(--mea-w-semibold); color: var(--t-text); }

  .session-item { border-top-color: var(--t-border); }
  .session-item__type { color: var(--t-text-secondary); }
  .session-item__time { color: var(--t-text-muted); }
  .session-item__link { color: inherit; }
  .session-item__link:hover { color: var(--t-link); }

  .provider-summary__label { color: var(--t-text-muted); }
  .provider-summary__value--active { color: var(--t-success-text); }
  .provider-summary__value--inactive { color: var(--t-text-muted); }
}

/* ──────────────────────────────────────────────────────────────
   Wave 4 — deals list + deal-detail. STRUCTURE ONLY (@layer layout);
   paint follows in @layer design below. No inline styles, no scripts:
   filter chips / sort headers / pagination are plain links, the bulk
   action bar + every detail mutation is a real <form>.
   ────────────────────────────────────────────────────────────── */
@layer layout {

  /* Accessible-but-invisible label text (no hex; structure only). */
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
  }

  .btn--outline { border: 1px solid; }
  .btn--block { display: flex; width: 100%; }

  .deals-page { display: grid; gap: var(--mea-space-5); }
  .deals-page__intro { display: grid; gap: var(--mea-space-1); }
  .deals-page__title { font-size: var(--mea-text-2xl); line-height: var(--mea-lh-tight); }
  .deals-page__subtitle { font-size: var(--mea-text-sm); }

  .filter-bar { display: flex; flex-wrap: wrap; gap: var(--mea-space-2); }
  .filter-chip {
    display: inline-flex; align-items: center; gap: var(--mea-space-2);
    min-height: var(--t-target-min);
    padding: var(--mea-space-1) var(--mea-space-3);
    border-radius: var(--mea-radius-pill);
    border: 1px solid;
    text-decoration: none;
    font-size: var(--mea-text-sm);
  }
  .filter-chip__count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--mea-space-5);
    padding: 0 var(--mea-space-1);
    border-radius: var(--mea-radius-pill);
    font-size: var(--mea-text-xs); font-weight: var(--mea-w-bold);
    font-variant-numeric: tabular-nums;
  }

  .deals-search { display: flex; flex-wrap: wrap; align-items: end; gap: var(--mea-space-2); }
  .deals-search__label { font-size: var(--mea-text-sm); flex-basis: 100%; }
  .deals-search__input {
    flex: 1; min-width: 12rem;
    min-height: var(--t-target-min);
    padding: var(--mea-space-2) var(--mea-space-3);
    border-radius: var(--mea-radius-md);
    border: 1px solid;
    font: inherit;
  }

  .deals-table__scroll { overflow-x: auto; }
  .deals-table { width: 100%; border-collapse: collapse; font-size: var(--mea-text-sm); }
  .deals-table th { text-align: left; padding: var(--mea-space-2); font-size: var(--mea-text-xs); text-transform: uppercase; letter-spacing: var(--mea-ls-caps); white-space: nowrap; }
  .deals-table td { padding: var(--mea-space-2); border-top: 1px solid; vertical-align: middle; }
  .deals-table__meta { white-space: nowrap; }
  .deals-table__th--check, .deals-row .deals-table__cell--check { width: var(--mea-space-8); text-align: center; }
  .deals-sort { text-decoration: none; display: inline-flex; align-items: center; gap: var(--mea-space-1); }
  .deals-sort__caret { font-size: var(--mea-text-xs); }
  .deals-row__link { text-decoration: none; display: inline-flex; align-items: center; gap: var(--mea-space-2); }
  .gang-unit-dot {
    display: inline-block; width: var(--mea-space-2); height: var(--mea-space-2);
    border-radius: var(--mea-radius-circle); flex: none;
  }
  .deals-program { display: inline-flex; align-items: center; gap: var(--mea-space-2); }
  .deals-program::before {
    content: ""; width: var(--mea-space-2); height: var(--mea-space-2);
    border-radius: var(--mea-radius-circle); flex: none;
  }

  .deals-bulk { display: grid; gap: var(--mea-space-4); }
  .deals-bulk__controls {
    display: grid; gap: var(--mea-space-2);
    padding: var(--mea-space-4);
    border-radius: var(--mea-radius-lg);
    border: 1px solid;
  }
  .deals-bulk__legend { font-size: var(--mea-text-md); font-weight: var(--mea-w-bold); padding: 0 var(--mea-space-1); }
  .deals-bulk__field { font-size: var(--mea-text-sm); }
  .deals-bulk__control {
    min-height: var(--t-target-min);
    padding: var(--mea-space-2) var(--mea-space-3);
    border-radius: var(--mea-radius-md);
    border: 1px solid;
    font: inherit;
  }
  .deals-bulk__submit { justify-self: start; }

  .pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mea-space-3); }
  .pagination__link { text-decoration: none; min-height: var(--t-target-min); display: inline-flex; align-items: center; }
  .pagination__info { font-size: var(--mea-text-sm); font-variant-numeric: tabular-nums; }

  /* ── deal detail ── */
  .deal-detail-page { display: grid; gap: var(--mea-space-5); }
  .deal-detail__back { text-decoration: none; font-size: var(--mea-text-sm); }
  .deal-summary { display: flex; align-items: center; gap: var(--mea-space-4); flex-wrap: wrap; padding: var(--mea-space-5); border-radius: var(--mea-radius-2xl); }
  .deal-summary__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--mea-space-12); height: var(--mea-space-12); flex: none;
    border-radius: var(--mea-radius-circle);
    font-weight: var(--mea-w-bold);
  }
  .deal-summary__heading { display: grid; gap: var(--mea-space-1); flex: 1; min-width: 12rem; }
  .deal-summary__name { font-size: var(--mea-text-2xl); line-height: var(--mea-lh-tight); }
  .deal-summary__meta { font-size: var(--mea-text-sm); }
  .deal-summary__actions { display: flex; gap: var(--mea-space-2); flex-wrap: wrap; }

  .deal-facts { display: grid; gap: var(--mea-space-3); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .deal-fact { display: grid; gap: var(--mea-space-1); }
  .deal-fact__label { font-size: var(--mea-text-xs); text-transform: uppercase; letter-spacing: var(--mea-ls-caps); }
  .deal-fact__value { font-size: var(--mea-text-md); font-weight: var(--mea-w-semibold); }
  .deal-charge { display: inline-block; padding: var(--mea-space-1) var(--mea-space-2); border-radius: var(--mea-radius-pill); font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); }

  .deal-detail__layout { display: grid; gap: var(--mea-space-6); align-items: start; }
  @media (min-width: 56rem) { .deal-detail__layout { grid-template-columns: 3fr 2fr; } }
  .deal-detail__main, .deal-detail__aside { display: grid; gap: var(--mea-space-5); align-content: start; }

  .deal-card { display: grid; gap: var(--mea-space-3); padding: var(--mea-space-4); border-radius: var(--mea-radius-lg); border: 1px solid; }
  .deal-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--mea-space-3); }
  .deal-card__title { font-size: var(--mea-text-md); }
  .deal-card__meta { font-size: var(--mea-text-sm); font-variant-numeric: tabular-nums; }
  .deal-card__body { display: grid; gap: var(--mea-space-3); }
  .deal-empty { padding: var(--mea-space-3) 0; text-align: center; }

  .mission-list { display: grid; gap: var(--mea-space-2); }
  .mission { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--mea-space-3); padding: var(--mea-space-2) 0; border-top: 1px solid; }
  .mission__icon { font-size: var(--mea-text-lg); }
  .mission__detail { display: grid; gap: var(--mea-space-1); }
  .mission__name { font-weight: var(--mea-w-semibold); }
  .mission__sub { font-size: var(--mea-text-xs); }

  .deal-timeline { display: grid; gap: var(--mea-space-3); list-style: none; padding: 0; margin: 0; }
  .deal-timeline__event { display: grid; grid-template-columns: auto 1fr; gap: var(--mea-space-3); }
  .deal-timeline__dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--mea-space-7); height: var(--mea-space-7); flex: none;
    border-radius: var(--mea-radius-circle); font-weight: var(--mea-w-bold);
  }
  .deal-timeline__detail { display: grid; gap: var(--mea-space-1); }
  .deal-timeline__text { font-weight: var(--mea-w-semibold); }
  .deal-timeline__time { font-size: var(--mea-text-xs); }

  .deal-note-list { display: grid; gap: var(--mea-space-3); }
  .deal-note { display: grid; gap: var(--mea-space-1); padding: var(--mea-space-2) 0; border-top: 1px solid; }
  .deal-note__head { display: flex; justify-content: space-between; gap: var(--mea-space-3); }
  .deal-note__author { font-weight: var(--mea-w-semibold); font-size: var(--mea-text-sm); }
  .deal-note__time { font-size: var(--mea-text-xs); }
  .deal-note__body { font-size: var(--mea-text-sm); line-height: var(--mea-lh-normal); }

  .deal-form { display: grid; gap: var(--mea-space-2); padding-top: var(--mea-space-3); border-top: 1px solid; }
  .deal-form__title { font-size: var(--mea-text-md); }
  .deal-form__desc, .deal-form__help { font-size: var(--mea-text-sm); line-height: var(--mea-lh-normal); }
  .deal-form__label { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold); }
  .deal-form__control {
    min-height: var(--t-target-min);
    padding: var(--mea-space-2) var(--mea-space-3);
    border-radius: var(--mea-radius-md);
    border: 1px solid; font: inherit; width: 100%;
  }
  .deal-actions { display: grid; gap: var(--mea-space-3); }
  .deal-action { font-weight: var(--mea-w-bold); }

  .gang-unit-alert { display: grid; gap: var(--mea-space-2); padding: var(--mea-space-4); border-radius: var(--mea-radius-lg); border: 1px solid; }
  .gang-unit-alert__banner { display: flex; align-items: center; gap: var(--mea-space-2); font-weight: var(--mea-w-bold); }

  .deal-section-error { display: grid; gap: var(--mea-space-2); padding: var(--mea-space-4); border-radius: var(--mea-radius-md); border: 1px solid; }
  .deal-section-error__title { font-weight: var(--mea-w-bold); }
  .deal-section-error__body { font-size: var(--mea-text-sm); }
  .deal-section-error__retry { justify-self: start; }

  .deals-bulk-result { display: grid; gap: var(--mea-space-5); }
  .deals-bulk-result__list { display: grid; gap: var(--mea-space-1); }
  .deals-bulk-result__ok, .deals-bulk-result__fail { font-size: var(--mea-text-sm); font-family: var(--mea-font-mono); }
}

/* Wave 4 — deals list + deal-detail: PAINT ONLY, every value a token (D10). */
@layer design {

  .btn--outline { background: var(--t-bg-elevated); border-color: var(--t-border); color: var(--t-text-secondary); font-weight: var(--mea-w-semibold); }

  .deals-page__subtitle { color: var(--t-text-secondary); }
  .deals-page__title { font-family: var(--mea-font-heading); font-weight: var(--mea-w-extrabold); }

  .filter-chip { background: var(--t-bg-elevated); border-color: var(--t-border); color: var(--t-text-secondary); }
  .filter-chip--active { background: var(--t-accent); border-color: var(--t-accent); color: var(--t-accent-text); }
  .filter-chip__count { background: var(--t-bg-active); color: var(--t-text-secondary); }
  .filter-chip--active .filter-chip__count { background: var(--t-accent-text); color: var(--t-accent); }

  .deals-search__label { color: var(--t-text-secondary); font-weight: var(--mea-w-semibold); }
  .deals-search__input { background: var(--t-bg-elevated); border-color: var(--t-border); color: var(--t-text); }
  .deals-search__input:focus-visible { border-color: var(--t-border-focus); }

  .deals-table th { color: var(--t-text-muted); }
  .deals-table td { border-top-color: var(--t-border); }
  .deals-table__meta { color: var(--t-text-secondary); }
  .deals-sort { color: var(--t-text-muted); }
  .deals-sort:hover { color: var(--t-link); }
  .deals-row__link { color: inherit; }
  .deals-row__link:hover .person-cell__name { color: var(--t-link); }
  .deals-row--flagged { background: var(--mea-red-light); }
  .gang-unit-dot { background: var(--mea-red); }

  .deals-program::before { background: var(--t-text-muted); }
  .deals-program--high::before { background: var(--mea-red); }
  .deals-program--med::before { background: var(--mea-amber); }
  .deals-program--low::before { background: var(--mea-green); }

  .deal-charge { background: var(--t-bg-active); color: var(--t-text-secondary); }
  .deal-charge--drug { background: var(--mea-violet-light); color: var(--mea-violet); }
  .deal-charge--theft { background: var(--mea-amber-light); color: var(--mea-amber-dark); }
  .deal-charge--property { background: var(--mea-orange-light); color: var(--mea-orange-dark); }
  .deal-charge--conduct { background: var(--mea-blue-50); color: var(--mea-blue-dark); }
  .deal-charge--dui { background: var(--mea-red-light); color: var(--mea-red-dark); }
  .deal-charge--trespass { background: var(--mea-teal-light); color: var(--mea-teal-dark); }
  .deal-charge--assault { background: var(--mea-red-light); color: var(--mea-red-dark); }

  .deals-bulk__controls { background: var(--t-card-bg); border-color: var(--t-card-border); }
  .deals-bulk__field { color: var(--t-text-secondary); font-weight: var(--mea-w-semibold); }
  .deals-bulk__control { background: var(--t-bg-elevated); border-color: var(--t-border); color: var(--t-text); }
  .deals-bulk__control:focus-visible { border-color: var(--t-border-focus); }

  .pagination__link { color: var(--t-link); font-weight: var(--mea-w-semibold); }
  .pagination__link:hover { color: var(--t-link-hover); }
  .pagination__info { color: var(--t-text-muted); }

  .deal-detail__back { color: var(--t-link); font-weight: var(--mea-w-semibold); }
  .deal-summary { background: var(--t-card-bg); border: 1px solid var(--t-card-border); box-shadow: var(--mea-shadow-card); }
  .deal-summary__avatar { background: var(--t-accent); color: var(--t-accent-text); }
  .deal-summary__name { font-family: var(--mea-font-heading); font-weight: var(--mea-w-extrabold); }
  .deal-summary__meta { color: var(--t-text-secondary); }

  .deal-fact__label { color: var(--t-text-muted); }
  .deal-fact__value { color: var(--t-text); }

  .deal-card { background: var(--t-card-bg); border-color: var(--t-card-border); box-shadow: var(--mea-shadow-card); }
  .deal-card__title { font-family: var(--mea-font-heading); font-weight: var(--mea-w-bold); }
  .deal-card__meta { color: var(--t-text-muted); }
  .deal-empty { color: var(--t-text-muted); }

  .mission { border-top-color: var(--t-border); }
  .mission__sub { color: var(--t-text-muted); }
  .mission--completed .mission__icon { color: var(--t-success-text); }
  .mission--active .mission__icon { color: var(--mea-blue); }
  .mission--pending .mission__icon { color: var(--t-text-muted); }

  .deal-timeline__dot { background: var(--t-bg-active); color: var(--t-text-secondary); }
  .deal-timeline__dot--green { background: var(--mea-green-light); color: var(--mea-green-dark); }
  .deal-timeline__dot--red { background: var(--mea-red-light); color: var(--mea-red-dark); }
  .deal-timeline__dot--amber { background: var(--mea-amber-light); color: var(--mea-amber-dark); }
  .deal-timeline__dot--blue { background: var(--mea-blue-50); color: var(--mea-blue-dark); }
  .deal-timeline__time { color: var(--t-text-muted); }

  .deal-note { border-top-color: var(--t-border); }
  .deal-note__time { color: var(--t-text-muted); }
  .deal-note__body { color: var(--t-text); }

  .deal-form { border-top-color: var(--t-border); }
  .deal-form__desc, .deal-form__help { color: var(--t-text-secondary); }
  .deal-form__label { color: var(--t-text-secondary); }
  .deal-form__control { background: var(--t-bg-elevated); border-color: var(--t-border); color: var(--t-text); }
  .deal-form__control:focus-visible { border-color: var(--t-border-focus); }
  .deal-action--complete { background: var(--mea-grad-cta); color: var(--mea-white); }
  .deal-action--fail { background: var(--t-bg-elevated); border: 1px solid var(--mea-red); color: var(--mea-red-dark); }

  .gang-unit-alert { background: var(--mea-red-light); border-color: var(--mea-red); }
  .gang-unit-alert__banner { color: var(--mea-red-dark); }

  .deal-section-error { background: var(--t-bg-elevated); border-color: var(--t-warning); }
  .deal-section-error__title { color: var(--t-text); }
  .deal-section-error__body { color: var(--t-text-secondary); }

  .deals-bulk-result__ok { color: var(--t-success-text); }
  .deals-bulk-result__fail { color: var(--mea-red-dark); }
  .deals-bulk-result__fail-id { font-weight: var(--mea-w-bold); }
}

/* ──────────────────────────────────────────────────────────────
   Per-jurisdiction landing — STRUCTURE ONLY (@layer layout); paint
   follows in @layer design below. The role grid is plain links (or,
   in demo mode, one-click POST forms); no inline styles, no scripts.
   ────────────────────────────────────────────────────────────── */
@layer layout {

  .landing { display: grid; gap: var(--mea-space-6); }
  .landing__head { display: grid; gap: var(--mea-space-1); }
  .landing__tenant { font-size: var(--mea-text-2xl); line-height: var(--mea-lh-tight); }
  .landing__subtitle { font-size: var(--mea-text-md); }
  .landing__demo { margin: 0; }

  .role-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--mea-space-3);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
  .role-tile { display: grid; }
  .role-tile__form { display: grid; margin: 0; }
  .role-tile__action {
    display: flex; align-items: center; justify-content: center;
    min-height: var(--t-target-min);
    padding: var(--mea-space-5) var(--mea-space-4);
    border-radius: var(--mea-radius-2xl);
    border: 1px solid;
    text-decoration: none;
    text-align: center;
    width: 100%;
    font: inherit;
    cursor: pointer;
  }
  .role-tile__title { font-size: var(--mea-text-md); font-weight: var(--mea-w-bold); }
}

/* Per-jurisdiction landing: PAINT ONLY, every value a token (D10). */
@layer design {

  .landing__tenant { font-family: var(--mea-font-heading); font-weight: var(--mea-w-extrabold); }
  .landing__subtitle { color: var(--t-text-secondary); }

  .role-tile__action {
    background: var(--t-card-bg);
    border-color: var(--t-card-border);
    color: var(--t-text);
    box-shadow: var(--mea-shadow-card);
  }
  .role-tile__action:hover { border-color: var(--t-border-focus); }
  .role-tile__action:focus-visible { outline: 2px solid var(--t-border-focus); outline-offset: 2px; }
  .role-tile__action--demo { background: var(--t-bg-elevated); }
  .role-tile__title { color: var(--t-text); }
}