/* Hallmark · component: incident report form · genre: editorial · theme: approved paper/ink/yellow
 * states: default · hover · focus · active · disabled · loading · error · success
 * audience: publication readers · use: submit evidence for editorial review · tone: editorial
 * pre-emit critique: P5 H5 E4 S5 R5 V4 */
@import url('../tokens.css');
.incident-report { border-top: 2px solid var(--color-ink); padding-block: var(--space-xl) var(--space-2xl); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-2xl); }
.report-intro h2 { font: 800 clamp(2rem, 3.4vw, 3rem)/1.05 var(--font-display); font-style: normal; letter-spacing: -.035em; max-width: 12ch; overflow-wrap: anywhere; min-width: 0; }
.report-intro > p { font: 400 22px/1.45 var(--font-body); max-width: 32ch; margin-top: var(--space-md); }
.report-intro .report-note, .report-note { color: var(--color-muted); font: 400 17px/1.5 var(--font-body); }
.report-form { min-width: 0; }
.report-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); }
.report-field { min-width: 0; }
.report-field-wide { grid-column: 1 / -1; }
.report-field label { display: block; font: 700 16px/1.4 var(--font-ui); margin-bottom: var(--space-xs); }
.report-field label span { color: var(--color-muted); font-weight: 500; white-space: nowrap; }
.report-field input, .report-field textarea { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--control-height); border: 1px solid var(--color-muted); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); padding: 12px; font: 400 16px/1.5 var(--font-ui); }
.report-field textarea { resize: vertical; }
.field-hint { min-height: 1.5em; margin-top: var(--space-xs); color: var(--color-muted); font: 500 14px/1.5 var(--font-ui); }
.report-privacy { margin-top: var(--space-lg); color: var(--color-muted); font: 500 14px/1.5 var(--font-ui); max-width: 66ch; }
.report-privacy a { white-space: nowrap; }
.report-actions { display: flex; align-items: flex-start; gap: var(--space-lg); margin-top: var(--space-lg); }
.report-submit { display: inline-flex; justify-content: space-between; align-items: center; gap: var(--space-xl); flex-shrink: 0; min-height: var(--control-height); padding: 12px 20px; border: 1px solid var(--color-ink); border-radius: var(--radius-control); background: var(--color-accent); color: var(--color-accent-ink); font: 800 16px/1.5 var(--font-ui); white-space: nowrap; cursor: pointer; }
.report-status { font: 500 15px/1.5 var(--font-ui); min-width: 0; }
.report-trap { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: clip; }
.report-form :is(input, textarea, button):focus-visible, .report-form .is-focus { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.report-field :is(input, textarea):active { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.report-submit:active, .report-submit.is-active { transform: translateY(1px); background: var(--color-evidence); color: var(--color-ink); }
.report-form :is(input, textarea, button):disabled { opacity: .55; cursor: not-allowed; }
.report-form[data-state="loading"] .report-submit { background: var(--color-evidence); color: var(--color-ink); cursor: progress; }
.report-field [aria-invalid="true"], .report-form[data-state="error"] .report-submit { border-color: var(--color-error); }
.report-field:has([aria-invalid="true"]) .field-hint, .report-form[data-state="error"] .report-status { color: var(--color-error); }
.report-form[data-state="success"] .report-status { border-left: 3px solid var(--color-ink); padding-left: var(--space-sm); }
.report-form[data-state="success"] .report-submit { background: var(--color-evidence); color: var(--color-ink); }
@media (hover: hover) { .report-field :is(input, textarea):hover:not(:disabled), .report-field .is-hover { background: var(--color-evidence); color: var(--color-ink); } .report-submit:hover:not(:disabled), .report-submit.is-hover { background: var(--color-evidence); color: var(--color-ink); } }
@media (max-width: 900px) { .incident-report { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } .report-intro h2 { max-width: none; } .report-intro > p { max-width: 55ch; } }
@media (max-width: 600px) { .report-fields { grid-template-columns: minmax(0, 1fr); } .report-actions { flex-direction: column; gap: var(--space-md); } .incident-report { padding-block: var(--space-lg) var(--space-xl); } }
@media (prefers-reduced-motion: reduce) { .report-submit:active, .report-submit.is-active { transform: none; } }