/* ============================================================
   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 {

	@media (max-width: 48rem) {
		.officer-issue {
			padding: 0;
		}
	}

	.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 {

	@media (max-width: 48rem) {
		.officer-issue__body {
			background-color: var(--t-card-bg);
		}
	}

	.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);
	}
}