/* ============================================================
   Officer Issue Detail (desk/staff) 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.

   DESK page: officers/staff read a past referral under the default light
   .app-screen palette. 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 {
  .officer-issue__back { justify-self: start; white-space: nowrap; }
  .officer-issue__body { display: grid; gap: var(--mea-space-6); align-content: start; }

  /* Header: the offense headline, then a status badge + timestamp line. */
  .officer-issue__header { display: grid; gap: var(--mea-space-2); }
  .officer-issue__offense { margin: 0; }
  .officer-issue__meta { display: flex; flex-wrap: wrap; align-items: center;
                         gap: var(--mea-space-2); margin: 0; }
  .officer-issue__meta-time { white-space: nowrap; }

  /* Offense facts: a responsive definition grid of label/value pairs. */
  .issue-facts { display: grid; gap: var(--mea-space-4); margin: 0;
                 grid-template-columns: repeat(2, 1fr);
                 padding: var(--mea-space-5); border-radius: var(--mea-radius-xl); }
  .issue-fact { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .issue-fact__label, .issue-fact__value { margin: 0; }
  @container (max-width: 32rem) { .issue-facts { grid-template-columns: 1fr; } }

  /* Citizen details: a titled card holding a two-column definition grid. */
  .issue-citizen, .issue-screening, .issue-statement {
    display: grid; gap: var(--mea-space-4);
    padding: var(--mea-space-5); border-radius: var(--mea-radius-xl); }
  .issue-citizen__title, .issue-screening__title, .issue-statement__title { margin: 0; }
  .citizen-facts { display: grid; gap: var(--mea-space-4); margin: 0;
                   grid-template-columns: repeat(2, 1fr); }
  .citizen-fact { display: grid; gap: var(--mea-space-1); min-inline-size: 0; }
  .citizen-fact--full { grid-column: 1 / -1; }
  .citizen-fact__label, .citizen-fact__value { margin: 0; }
  @container (max-width: 32rem) { .citizen-facts { grid-template-columns: 1fr; } }

  /* Screening read-out: label on one side, value on the other, per row. */
  .screening-facts { display: grid; gap: var(--mea-space-2); margin: 0; }
  .screening-fact { display: grid; grid-template-columns: 1fr auto;
                    gap: var(--mea-space-3); align-items: baseline; }
  .screening-fact__label, .screening-fact__value { margin: 0; min-inline-size: 0; }
  .screening-fact__value { text-align: end; }

  /* Probable-cause statement: preserve the authored line breaks. */
  .issue-statement__body { margin: 0; white-space: pre-wrap; }
}

@layer design {
  .officer-issue__offense { font-family: var(--mea-font-citizen); font-size: var(--mea-text-2xl);
                            font-weight: var(--mea-w-bold); color: var(--t-text); }
  .officer-issue__meta-sep { color: var(--t-text-muted); }
  .officer-issue__meta-time { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }

  /* Offense facts. */
  .issue-facts { background: var(--t-card-bg); border: 1px solid var(--t-card-border);
                 box-shadow: var(--mea-shadow-sm); }
  .issue-fact__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); }
  .issue-fact__value { font-size: var(--mea-text-md); color: var(--t-text); }

  /* Citizen / screening / statement cards. */
  .issue-citizen, .issue-screening, .issue-statement {
    background: var(--t-card-bg); border: 1px solid var(--t-card-border);
    box-shadow: var(--mea-shadow-sm); }
  .issue-citizen__title, .issue-screening__title, .issue-statement__title {
    font-family: var(--mea-font-citizen); font-size: var(--mea-text-lg);
    font-weight: var(--mea-w-bold); color: var(--t-text); }

  .citizen-fact__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); }
  .citizen-fact__value { font-size: var(--mea-text-md); font-weight: var(--mea-w-semibold);
                         color: var(--t-text); }

  .screening-fact__label { font-size: var(--mea-text-sm); color: var(--t-text-secondary); }
  .screening-fact__value { font-size: var(--mea-text-sm); font-weight: var(--mea-w-semibold);
                           color: var(--t-text); }

  .issue-statement__body { font-size: var(--mea-text-md); color: var(--t-text-secondary);
                           line-height: var(--mea-lh-relaxed); }
}