/* After Action Report page and controls. Built on /spi.css tokens, which this file reads and never edits. */
.aar-page { --aar-bg: var(--spi-paper, #f4f4f0); --aar-panel: var(--spi-panel, #fefefe); --aar-ink: var(--spi-ink, #262326); --aar-muted: var(--spi-muted, #535353);
  --aar-rule: var(--spi-rule, #777); --aar-teal: var(--spi-teal, #066a7a); --aar-field: var(--spi-source-field, #dce1d8); --aar-warm: var(--spi-warm, #ece5dd);
  margin: 0; background: var(--aar-bg); color: var(--aar-ink); font-family: var(--spi-body, Georgia, serif); font-size: 18px; line-height: 1.55; }
.aar-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 16px; background: var(--aar-bg); border-bottom: 3px solid var(--aar-ink); font-family: var(--spi-ui, Arial, sans-serif); }
.aar-bar a { color: var(--aar-ink); text-decoration: none; font-weight: 700; }
.aar-bar-links { display: flex; gap: 16px; }
.aar-bar-links a { font-weight: 500; }
.aar-wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
.aar-status, .aar-note, .aar-copy-status, .aar-cost, .aar-meta { color: var(--aar-muted); font-family: var(--spi-ui, Arial, sans-serif); font-size: 14px; }
.aar-note { margin: 4px 0 8px; }
.aar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 20px; }
.aar-btn { box-sizing: border-box; min-height: 44px; padding: 8px 16px; font: 600 15px var(--spi-ui, Arial, sans-serif); color: var(--aar-ink); background: var(--aar-panel); border: 1px solid var(--aar-ink); border-radius: var(--spi-radius-sm, 4px); cursor: pointer; }
.aar-btn-primary { background: var(--aar-ink); color: var(--aar-bg); }
.aar-btn:disabled { opacity: .55; cursor: default; }
.aar-btn:focus-visible, .aar-toggle:focus-visible, .aar-chip:focus-visible, .aar-wrap a:focus-visible, .aar-wrap input:focus-visible, .aar-wrap textarea:focus-visible { outline: 3px solid var(--aar-teal); outline-offset: 2px; }
.aar-fallback { width: 100%; min-height: 160px; box-sizing: border-box; margin-bottom: 16px; font: 13px/1.4 ui-monospace, monospace; }
.aar-gate { background: var(--aar-panel); border: 1px solid var(--aar-rule); border-radius: var(--spi-radius-md, 8px); padding: 16px; margin: 16px 0; font-family: var(--spi-ui, Arial, sans-serif); }
.aar-gate input { display: block; width: 100%; box-sizing: border-box; min-height: 44px; margin: 6px 0 12px; padding: 8px; font: inherit; }

.aar-report { background: var(--aar-panel); border: 1px solid var(--aar-rule); border-radius: var(--spi-radius-md, 8px); padding: 28px 32px; }
.aar-kicker { margin: 0; font: 700 12px var(--spi-ui, Arial, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--aar-teal); }
.aar-title { margin: 4px 0 6px; font-family: var(--spi-display, Georgia, serif); font-weight: 400; font-size: 2.1rem; line-height: 1.15; }
.aar-meta { margin: 0 0 10px; }
.aar-flavor { margin: 8px 0 0; padding: 8px 12px; background: var(--aar-warm); border-left: 3px solid var(--aar-teal); font-size: 15px; }
.aar-flavor-lead { font: 700 12px var(--spi-ui, Arial, sans-serif); text-transform: uppercase; letter-spacing: .06em; }
.aar-report h2 { margin: 32px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--aar-ink); font: 800 1.15rem var(--spi-ui, Arial, sans-serif); letter-spacing: -.01em; }
.aar-report h3 { margin: 20px 0 6px; font: 700 1rem var(--spi-ui, Arial, sans-serif); }
.aar-report h4 { margin: 0 0 4px; font: 700 .95rem var(--spi-ui, Arial, sans-serif); }
.aar-para { margin: 0 0 12px; }
.aar-list { margin: 0; padding-left: 22px; }
.aar-list li { margin: 0 0 8px; }
.aar-turns { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: baseline; font-family: var(--spi-ui, Arial, sans-serif); font-size: 12px; }
.aar-turns-lead { color: var(--aar-muted); }
.aar-chip { display: inline-block; padding: 1px 8px; border: 1px solid var(--aar-teal); border-radius: var(--spi-radius-sm, 4px); color: var(--aar-teal); background: var(--aar-field); text-decoration: none; font-weight: 600; }
.aar-chip:hover { background: var(--aar-teal); color: var(--aar-panel); }
.aar-chip-missing { border-style: dashed; color: var(--aar-muted); background: transparent; }
.aar-evidence { display: inline-block; padding: 0 6px; border: 1px dashed var(--aar-rule); border-radius: var(--spi-radius-sm, 4px); font: 600 11px var(--spi-ui, Arial, sans-serif); text-transform: uppercase; letter-spacing: .05em; color: var(--aar-muted); }
.aar-spec { display: inline-block; padding: 0 6px; margin-right: 4px; background: var(--aar-ink); color: var(--aar-bg); border-radius: var(--spi-radius-sm, 4px); font: 700 11px var(--spi-ui, Arial, sans-serif); text-transform: uppercase; letter-spacing: .06em; }
.aar-decision { font-weight: 700; }
.aar-table-wrap { overflow-x: auto; }
.aar-blindspot { width: 100%; border-collapse: collapse; font-family: var(--spi-ui, Arial, sans-serif); font-size: 14px; }
.aar-blindspot th, .aar-blindspot td { text-align: left; vertical-align: top; padding: 8px; border: 1px solid var(--aar-rule); }
.aar-blindspot thead th { background: var(--aar-field); }
.aar-toggle { min-height: 44px; padding: 6px 12px; font: 600 14px var(--spi-ui, Arial, sans-serif); color: var(--aar-ink); background: transparent; border: 1px solid var(--aar-rule); border-radius: var(--spi-radius-sm, 4px); cursor: pointer; }
.aar-cut { margin-top: 28px; }
.aar-reason { color: var(--aar-muted); font: 13px var(--spi-ui, Arial, sans-serif); }
.aar-cost { margin: 28px 0 0; padding-top: 8px; border-top: 1px solid var(--aar-rule); }
.aar-appendix { margin-top: 32px; }
.aar-turn { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--aar-rule); border-radius: var(--spi-radius-sm, 4px); background: var(--aar-bg); }
.aar-turn:target { border-color: var(--aar-teal); box-shadow: inset 4px 0 var(--aar-teal); background: var(--aar-field); }
.aar-record { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.45 ui-monospace, Menlo, monospace; }
.aar-own-turn { margin-left: 8px; font-weight: 400; font-size: 13px; color: var(--aar-teal); }

/* Controls on the Match and Wargamer pages: layout only, colours come from the host page. */
.aar-controls { margin: 8px 0; }
.aar-controls[hidden] { display: none; }
.aar-controls fieldset { margin: 12px 0; padding: 8px 12px; border: 1px solid currentColor; border-radius: 4px; }
.aar-controls legend { padding: 0 6px; font-weight: 600; }
.aar-controls label { display: block; margin: 10px 0; }
.aar-controls :is(select, textarea) { box-sizing: border-box; width: 100%; max-width: 100%; padding: 8px; font: inherit; }
.aar-controls textarea { min-height: 88px; }
.aar-controls .aar-counter { text-align: right; font-size: 13px; opacity: .8; }
.aar-controls ul.aar-saved, .aar-controls ul.aar-shots { margin: 6px 0; padding-left: 20px; }
.aar-controls .aar-working { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.aar-controls progress { flex: 1; min-width: 80px; }
.aar-controls a { color: inherit; font-weight: 600; }

@media (max-width: 520px) { .aar-report { padding: 16px; border-left: 0; border-right: 0; border-radius: 0; } .aar-wrap { padding: 12px 0 48px; } .aar-title { font-size: 1.6rem; } .aar-actions .aar-btn { flex: 1 1 100%; } }
@media (prefers-color-scheme: dark) {
  .aar-page:not(.aar-print-preview) { --aar-bg: #262326; --aar-panel: #333; --aar-ink: #f4f4f0; --aar-muted: #d4d4d0; --aar-rule: #a8a8a8; --aar-teal: #9fd3da; --aar-field: #3d4a4b; --aar-warm: #3f3a35; }
  .aar-page:not(.aar-print-preview) .aar-btn-primary { background: var(--aar-ink); color: #262326; }
}