/* Campaign Briefing overlay (src/ui/briefing.js). The base dialog look comes from hud.css; Begin stays in view. */
#graphics-reload { box-sizing: border-box; width: min(520px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; }
#graphics-reload[open] { display: flex; flex-direction: column; }
#graphics-reload .briefing-body { overflow: auto; min-height: 0; padding: 18px 22px 8px; -webkit-user-select: text; user-select: text; }
#graphics-reload .briefing-body:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
#graphics-reload h2, #graphics-reload p { overflow-wrap: anywhere; }
#graphics-reload p { font-size: 16px; line-height: 1.5; }
#graphics-reload .briefing-foot { flex: none; padding: 8px 22px 16px; border-top: 1px solid var(--panel-edge, #6b6474); }
#graphics-reload button { min-height: 48px; min-width: 140px; font-size: 17px; font-weight: 700; }
#briefing { box-sizing: border-box; width: min(600px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; }
#briefing[open] { display: flex; flex-direction: column; }
#briefing .briefing-body { overflow: auto; padding: 18px 22px 8px; min-height: 0; -webkit-user-select: text; user-select: text; }
#briefing .briefing-body:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
#briefing .briefing-eyebrow { margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
#briefing h2 { overflow-wrap: anywhere; }
#briefing #briefing-text p { margin: 10px 0; line-height: 1.55; font-size: 15px; }
#briefing .briefing-loan { margin: 10px 0; padding: 10px 12px; border-left: 3px solid var(--focus); background: rgba(255, 210, 122, 0.08); line-height: 1.5; }
#briefing .briefing-quote { margin: 14px 0; padding: 0 0 0 14px; border-left: 2px solid var(--panel-edge, #6b6474); }
#briefing .briefing-quote blockquote { margin: 0; font: italic 16px/1.5 Georgia, serif; }
#briefing .briefing-quote blockquote p { margin: 0; }
#briefing .briefing-quote figcaption { margin-top: 6px; color: var(--dim); font-size: 13px; }
#briefing .briefing-sources { margin: 0; padding-left: 18px; }
#briefing .briefing-sources li { margin: 2px 0; }
#briefing .briefing-sources a { display: inline-flex; align-items: center; min-height: 44px; color: var(--focus); overflow-wrap: anywhere; }
#briefing .briefing-foot { flex: none; display: flex; justify-content: flex-end; padding: 8px 22px 16px; border-top: 1px solid var(--panel-edge, #6b6474); }
#briefing .briefing-begin { margin: 8px 0 0; min-width: 140px; min-height: 48px; font-size: 17px; font-weight: 700; }
@media (max-width: 520px) {
  #briefing .briefing-body { padding: 14px 14px 6px; }
  #briefing .briefing-foot { padding: 6px 14px 12px; }
  #briefing .briefing-begin { width: 100%; }
}
#briefing .briefing-decisions { margin: 0 0 10px; padding-left: 18px; line-height: 1.5; }
#briefing .briefing-decisions li { margin: 4px 0; overflow-wrap: anywhere; }
/* Commanders with their period portraits or the generic silhouette (P6b; src/ui/art.js). Not focusable: tab order unchanged. */
#briefing .briefing-commanders h3 { margin: 14px 0 8px; }
#briefing .briefing-commander-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px 10px; }
#briefing .briefing-commander { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
#briefing .briefing-portrait { display: block; width: 64px; height: 80px; overflow: hidden; border-radius: 4px; background: #2a2218; box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 3px 8px rgba(0,0,0,0.45); }
#briefing .briefing-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
#briefing .briefing-commander-name { font-size: 13px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
#briefing .briefing-commander-note { font-size: 11.5px; line-height: 1.3; color: var(--dim); overflow-wrap: anywhere; }
/* Opposing commanders (P3t; src/ui/briefing.js): plain trait labels, the game rule, provenance, and a disclosure with each
   trait's claim and sources (shared with the unit card's Records dialog, .traits-man in hud.css). */
#briefing .briefing-commander-traits { font-size: 11.5px; line-height: 1.3; color: #ffd9b0; overflow-wrap: anywhere; }
#briefing .briefing-opponents h3 { margin: 14px 0 4px; }
#briefing .briefing-opponents-sub { margin: 0 0 8px; font-size: 13px; }
#briefing .briefing-opponent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#briefing .briefing-opponent { padding: 8px 10px; border-radius: 6px; background: rgba(200, 56, 74, 0.08); border-left: 3px solid #c8384a; min-width: 0; }
#briefing .briefing-opponent p { margin: 2px 0; line-height: 1.45; overflow-wrap: anywhere; }
#briefing .briefing-opponent-traits { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
#briefing .briefing-trait { padding: 1px 7px; border-radius: 10px; background: rgba(255, 210, 122, 0.14); color: #ffe6b8; font-size: 13px; }
#briefing .briefing-trait-prov { font-size: 12px; color: var(--dim); }
#briefing .briefing-opponent-rule { font-size: 13px; color: #c9e3a8; }
#briefing .briefing-opponent-note { font-size: 13px; color: #ffd9d2; }
#briefing .briefing-opponent-more summary { box-sizing: border-box; min-height: 44px; padding: 12px 0; line-height: 20px; cursor: pointer; color: var(--focus); font-size: 13.5px; }
#briefing .briefing-opponent-more summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }