/* src/ui/hud.css: the battle HUD. A thin top strip (menu, clock, pause, speeds, army list, balance), a bottom
   dock (unit card left, six orders centre, minimap right), brigade markers on the field. Dark rounded panels,
   light sans labels, serif names. Every dock and strip control is at least 44 CSS px (iPad touch). */
:root {
  color-scheme: dark;
  --panel: rgba(18, 16, 22, 0.84);
  --panel-edge: rgba(255, 255, 255, 0.14);
  --text: #f1ece0;
  --dim: #c9c2b4;
  --us: #3f7fd8;
  --cs: #c8384a;
  --focus: #ffd27a;
  --edge: 8px;
  --top-h: 52px;
  --objective-h: 0px;
  --dock-h: 150px;
  --mm: 140px;
  --dock-card-w: 330px;
  --dock-card-h: 150px;
  --dock-order-w: 86px;
}
html, body { margin: 0; height: 100%; overflow: hidden; background: #17141a; touch-action: manipulation; overscroll-behavior: none; }
body { font: 14px/1.35 "Helvetica Neue", Arial, sans-serif; color: var(--text); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#battlefield { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; cursor: default; -webkit-tap-highlight-color: transparent; }
#battlefield:focus { outline: none; }
#battlefield:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.panel { position: fixed; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.45); }
button { font: inherit; color: var(--text); -webkit-tap-highlight-color: transparent; }
kbd { font-size: 11px; border: 1px solid #8a8580; border-radius: 3px; padding: 0 4px; }

/* ---- top strip ------------------------------------------------------------------------------------ */
#topbar { top: calc(var(--edge) + env(safe-area-inset-top)); left: calc(var(--edge) + env(safe-area-inset-left)); right: calc(var(--edge) + env(safe-area-inset-right));
  height: auto; box-sizing: border-box; padding: 1px 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; z-index: 10;
  container: battle-header / inline-size; background: #18161d; }
.header-primary { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 0 1 auto; }
.header-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; min-width: 0; flex: 1 1 360px; }
.tb-btn, #topbar button { min-width: 44px; min-height: 44px; background: none; border: 1px solid transparent; border-radius: 6px; cursor: pointer; padding: 0 8px; }
#topbar button:hover { background: rgba(255,255,255,0.1); }
#topbar button[aria-pressed="true"], #topbar button[aria-expanded="true"] { background: rgba(255, 210, 122, 0.18); border-color: var(--focus); }
#menu-btn { font-size: 22px; }
#clock { position: relative; display: grid; grid-template-columns: 44px auto auto; grid-template-areas: "pause text speeds"; align-items: center; gap: 0 4px; padding-bottom: 3px; min-width: 0; }
#clock #pause { grid-area: pause; }
#clock .clocktext { grid-area: text; }
#clock .speeds { grid-area: speeds; }
#pause { font-size: 15px; }
.clocktext { font-size: 14px; line-height: 1.2; min-width: 0; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.speeds { display: flex; gap: 2px; }
.speeds button { font-size: 14px; font-variant-numeric: tabular-nums; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,0.12); border-radius: 2px; }
.progress i { display: block; height: 100%; width: 0; background: #4ec24e; border-radius: 2px; }
#balance { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 1 1 120px; min-width: 120px; min-height: 15px; }
#balance .bar { position: relative; flex: 1 1 auto; height: 6px; background: var(--cs); border-radius: 3px; }
#balance .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: var(--us); border-radius: 3px 0 0 3px; transition: width 0.4s; }
#balance .bar b { position: absolute; top: -4px; width: 8px; height: 14px; margin-left: -4px; left: 50%; background: #eee; border-radius: 2px; transition: left 0.4s; }
.flag { width: 22px; height: 15px; display: inline-block; background-size: cover; border-radius: 2px; flex: none; }
#perf { margin: 0; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
@container battle-header (max-width: 460px) {
  #clock { grid-template-columns: 44px auto; grid-template-areas: "pause speeds" "text text"; }
  .header-secondary #balance { flex-basis: 100%; }
}
#topbar button:focus-visible { outline-offset: -4px; }

#objective { top: calc(var(--edge) + var(--top-h) + 2px + env(safe-area-inset-top)); left: calc(var(--edge) + env(safe-area-inset-left)); margin: 0; padding: 2px 6px; font-size: 14px; line-height: 1.2; max-width: 46vw;
  box-sizing: border-box; max-height: min(96px, calc((100dvh - var(--top-h) - var(--dock-h) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 2 - 4px));
  overflow-x: hidden; overflow-y: auto; overflow-wrap: anywhere; overscroll-behavior: contain; touch-action: pan-y; background: #18161d; }
#objective:empty { display: none; }
#capture-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
#moment-banner { top: calc(var(--edge) + var(--top-h) + 6px + env(safe-area-inset-top)); right: calc(var(--edge) + env(safe-area-inset-right));
  max-width: 44vw; box-sizing: border-box; margin: 0; padding: 9px 12px; z-index: 12; pointer-events: none;
  color: #fff0c5; border-color: #b18c43; background: #302719; font-weight: 600; }
#moment-banner[hidden] { display: none; }
#moment-banner[data-style="full"] { animation: moment-entry 250ms ease-out; }
@keyframes moment-entry { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) { #moment-banner { top: calc(var(--edge) + var(--top-h) + 52px + env(safe-area-inset-top)); left: var(--edge); right: var(--edge); max-width: none; } }
@media (prefers-reduced-motion: reduce) { #moment-banner { animation: none; } }
.field-loot-preview { position: fixed; inset: 0; margin: 0; padding: 0; width: 100vw; height: 100dvh;
  max-width: none; max-height: none; box-sizing: border-box; border: 0; background: #17141a; color: var(--text); overflow: hidden; }
.field-loot-preview header.preview-heading { position: absolute; inset: 0 0 auto; height: 60px; padding: 4px 8px;
  display: flex; gap: 8px; align-items: center; justify-content: space-between; box-sizing: border-box; z-index: 35; background: #17141a; }
.field-loot-preview .preview-heading h2 { font: 600 16px/1.2 system-ui, sans-serif; margin: 0; }
.field-loot-preview .preview-heading button { min-width: 64px; min-height: 44px; }
body dialog.field-loot-preview .rw { left: 0; right: 0; top: 60px; bottom: 0; }
/* Short screens scroll instead of shrinking type; decorative rays cannot widen the card column. */
.field-loot-preview .rw-stage { overflow-y: auto; }
.field-loot-preview .rw-reveal { flex: none; min-height: 100%; overflow-x: clip; }
.field-loot-preview .rw-deal { --cw: 230px !important; flex: none; height: 350px; }
.field-loot-preview .rw-arms small, .field-loot-preview .rw-stat small { font-size: 12px; }
@media (max-width: 600px) {
  .field-loot-preview .rw-foot { flex-direction: column; gap: 10px; padding-bottom: 8px; }
}
#capture-count[hidden], #intro-hint[hidden] { display: none; }
#field-crates { position: fixed; inset: 0; pointer-events: none; }
.crate-connector { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0.85; }
.field-crate { position: absolute; margin: 0; display: flex; align-items: center; gap: 5px; max-width: 165px; padding: 5px 8px; border-radius: 6px;
  color: #f1ece0; background: #181820; border: 2px solid var(--rarity); font-size: 12px; box-shadow: 0 2px 6px #0008; }
.field-crate[hidden] { display: none; }
.crate-shape { color: var(--rarity); font-size: 24px; flex: none; }
.crate-label { overflow-wrap: anywhere; }
#field-stores { top: calc(var(--edge) + var(--top-h) + 6px + env(safe-area-inset-top)); right: calc(var(--edge) + env(safe-area-inset-right)); width: min(312px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))); padding: 8px; z-index: 13;
  box-sizing: border-box; max-height: calc(100dvh - var(--top-h) - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; background: #18161d; }
#field-stores[hidden] { display: none; }
#field-stores h2 { margin: 0; font-size: 17px; }
#stores-actions { display: grid; gap: 8px; }
#field-stores button { width: 100%; min-height: 48px; padding: 8px; margin-bottom: 6px; color: var(--text); border: 1px solid #958da1; background: #302d38; border-radius: 6px; text-align: left; cursor: pointer; overflow-wrap: anywhere; font-size: 14px; }
#field-stores button:disabled { color: var(--dim); cursor: default; }
#intro-hint { bottom: calc(var(--edge) + var(--dock-h) + 14px + env(safe-area-inset-bottom)); left: calc(var(--edge) + env(safe-area-inset-left));
  max-width: min(430px, 47vw); margin: 0; padding: 9px 12px; border-color: var(--focus); pointer-events: none; }
#keyboard-targeting { bottom: calc(var(--edge) + var(--dock-h) + 14px + env(safe-area-inset-bottom));
  left: calc(var(--edge) + env(safe-area-inset-left)); right: calc(var(--edge) + env(safe-area-inset-right));
  box-sizing: border-box; margin: 0; padding: 9px 12px; color: #fff0c5; background: #302719;
  border-color: #b18c43; pointer-events: none; z-index: 12; }
#keyboard-targeting[hidden], .keyboard-targeting #tip, .keyboard-targeting #intro-hint { display: none; }
#intro { margin: auto; width: min(460px, calc(100vw - 64px)); max-height: calc(100vh - 64px); overflow: auto; }
#intro button { min-height: 48px; min-width: 48px; padding: 10px 24px; background: #f1ece0; color: #17141a; cursor: pointer; border-radius: 6px; border: 1px solid #b4aa98; }
#banner { top: calc(var(--edge) + var(--top-h) + 6px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 4px 14px; font: 15px Georgia, serif; border-color: var(--focus); z-index: 12; max-width: 92vw; }
#banner[hidden] { display: none; }
#banner button { min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--panel-edge); background: rgba(255,255,255,0.1); cursor: pointer; font: 14px "Helvetica Neue", Arial, sans-serif; }
#banner #banner-fly { background: #f1ece0; color: #1d1a16; }

/* ---- army list and event feed ------------------------------------------------------------------------ */
#army { top: calc(var(--edge) + var(--top-h) + 6px + env(safe-area-inset-top)); left: calc(var(--edge) + env(safe-area-inset-left)); width: min(312px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))); max-height: calc(100dvh - var(--top-h) - 22px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 8px; box-sizing: border-box; z-index: 13; background: #18161d; }
#army[hidden] { display: none; }
#army, #field-stores { padding-right: 24px; } /* Native overlay scrollbars keep their own lane. */
#army h2 { margin: 0; font: normal 16px/1.35 Georgia, serif; }
#army h2 kbd { font-size: 14px; }
.army-heading { position: sticky; top: -8px; display: flex; align-items: center; justify-content: space-between; gap: 4px; background: #18161d; padding: 0 0 6px; z-index: 1; }
#army-close { min-width: 88px; min-height: 44px; background: #302d38; border: 1px solid #958da1; border-radius: 6px; cursor: pointer; font-size: 14px; }
#army ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#army li button { width: 100%; min-height: 44px; display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: center; text-align: left; padding: 4px 8px;
  background: rgba(255,255,255,0.05); border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
#army li button:hover { background: rgba(255,255,255,0.12); }
#army li button[aria-pressed="true"] { border-color: #b9ff7a; }
#army .al-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
#army .al-men { font-variant-numeric: tabular-nums; }
#army .al-state { grid-column: 1 / -1; font-size: 14px; color: var(--dim); }
#army button:focus-visible, #field-stores button:focus-visible { outline-offset: -4px; }
#army .al-state.shaken { color: #ffd34d; }
#army .al-state.wavering { color: #ffb15c; }
#army .al-state.routing { color: #ff9a8a; }

#feed { right: calc(var(--edge) + env(safe-area-inset-right)); bottom: calc(var(--edge) + var(--dock-h) + 8px + env(safe-area-inset-bottom)); width: min(330px, 38vw); margin: 0; padding: 4px; list-style: none; display: grid; gap: 2px; z-index: 8; }
#feed:empty, #feed[hidden] { display: none; }
#feed button { width: 100%; min-height: 32px; display: flex; gap: 8px; align-items: baseline; text-align: left; padding: 3px 6px; background: none; border: 0; border-radius: 4px; cursor: pointer; font-size: 13px; }
#feed button:hover { background: rgba(255,255,255,0.1); }
#feed time { color: var(--dim); font-variant-numeric: tabular-nums; flex: none; }
#feed .us { color: #b8d4ff; }
#feed .cs { color: #ffc2c8; }

/* ---- bottom dock ----------------------------------------------------------------------------------- */
#dock { position: fixed; left: calc(var(--edge) + env(safe-area-inset-left)); right: calc(var(--edge) + env(safe-area-inset-right)); bottom: calc(var(--edge) + env(safe-area-inset-bottom));
  height: auto; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: end; pointer-events: none; z-index: 10; }
#dock > * { pointer-events: auto; position: static; }
#unitcard { width: var(--dock-card-w); height: var(--dock-card-h); min-width: 0; box-sizing: border-box; padding: 8px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-gutter: stable; }
#unitcard:focus-visible, #orders button:focus-visible { outline-offset: -4px; }
.ucempty { margin: 0; color: var(--dim); font-size: 14px; height: 100%; display: grid; place-items: center; text-align: center; }
.ucempty[hidden], #uc-body[hidden] { display: none; }
.uchead { display: grid; grid-template-columns: 56px auto; gap: 6px; align-items: start; }
.portrait { width: 56px; height: 56px; border-radius: 6px; background: #2a2630 center / cover no-repeat; display: grid; place-items: center; font: bold 22px Georgia, serif; color: #e9dfc6; border: 1px solid rgba(255,255,255,0.18); }
.portrait.us { background-color: #24304e; }
.portrait.cs { background-color: #4c4436; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.tile { position: relative; height: 56px; border-radius: 6px; background: #2b2830; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 2px 0 4px; box-sizing: border-box; }
.tile .lbl { position: relative; z-index: 1; font-size: 12px; color: #ece6d8; background: #17151c; width: 100%; text-align: center; }
.tile .val { position: relative; z-index: 1; font-size: 19px; font-weight: 300; background: #17151c; padding: 0 2px; border-radius: 2px; }
.tile i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; transition: height 0.25s; }
.tile.morale i { background: linear-gradient(#6fae2a, #3d7012); }
.tile.condition i { background: linear-gradient(#23a3b8, #10697a); }
.tile.cover i { background: linear-gradient(#c7a51a, #806608); }
.tile.reload i { background: linear-gradient(#d04a1e, #85240a); }
.ucname { margin: 0 0 6px; font-size: 13px; display: flex; justify-content: space-between; gap: 10px; }
.ucname #uc-name { min-width: 0; overflow-wrap: anywhere; }
.ucname .cas { color: var(--dim); white-space: nowrap; }
.ucstate { margin: 2px 0 0; font-size: 12px; color: var(--dim); overflow-wrap: anywhere; }

#orders { justify-self: center; display: grid; grid-template-columns: repeat(3, var(--dock-order-w)); gap: 6px; padding: 6px; box-sizing: border-box; }
#orders button { position: relative; width: var(--dock-order-w); height: 50px; min-height: 48px; background: rgba(40, 37, 46, 0.95); border: 1px solid #958da1; border-radius: 8px; cursor: pointer; font-size: 14px; padding: 12px 4px 0; }
#orders button .key { position: absolute; right: 4px; top: 1px; font-size: 12px; line-height: 1; color: var(--dim); }
#orders button:hover:not(:disabled) { background: rgba(70, 64, 82, 0.98); }
#orders button:disabled { color: #c9c2b4; cursor: default; }
#orders button:disabled .key { color: #c9c2b4; }
#orders button[aria-pressed="true"] .key { color: var(--text); }
#orders button[aria-pressed="true"] { background: #4a6a2a; border-color: #b9ff7a; }
#orders button[data-order="holdfire"][aria-pressed="true"] { background: #6a3a22; border-color: #ffb15c; }

/* Cavalry: the card's Mounted / Dismounted line and the Dismount toggle (pressed = on foot). */
.uccav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.uccav[hidden] { display: none; }
#uc-mount { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
#dismount-btn { position: relative; min-width: 48px; min-height: 44px; padding: 10px 22px 4px 10px; background: rgba(40, 37, 46, 0.95);
  border: 1px solid #958da1; border-radius: 8px; cursor: pointer; font-size: 14px; }
#dismount-btn:hover:not(:disabled) { background: rgba(70, 64, 82, 0.98); }
#dismount-btn:disabled { color: #c9c2b4; cursor: default; }
#dismount-btn[aria-pressed="true"] { background: #4a6a2a; border-color: #b9ff7a; }
#dismount-btn .key { position: absolute; right: 4px; top: 1px; font-size: 12px; line-height: 1; color: var(--dim); }
#dismount-btn[aria-pressed="true"] .key { color: var(--text); }
#dismount-btn:focus-visible { outline-offset: -4px; }

/* Delegation: the card's Delegate / Undo row (in the general's ochre) and the Attack / Defend / Support chooser. */
.ucdelegate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
#delegate-text { flex: 1 1 auto; min-width: 0; font-size: 13px; color: #f0c870; overflow-wrap: anywhere; }
#delegate-btn, #delegate-undo, #delegate-chooser button { position: relative; min-width: 48px; min-height: 44px; background: rgba(40, 37, 46, 0.95);
  border: 1px solid #b9790c; border-radius: 8px; cursor: pointer; font-size: 14px; }
#delegate-btn { padding: 10px 22px 4px 10px; }
#delegate-undo { padding: 4px 12px; }
#delegate-undo[hidden], #delegate-chooser[hidden] { display: none; }
#delegate-btn:hover:not(:disabled), #delegate-undo:hover, #delegate-chooser button:hover { background: rgba(70, 64, 82, 0.98); }
#delegate-btn:disabled { color: #c9c2b4; border-color: #958da1; cursor: default; }
#delegate-btn .key, #delegate-chooser .key { position: absolute; right: 4px; top: 1px; font-size: 12px; line-height: 1; color: var(--dim); }
#delegate-btn:focus-visible, #delegate-undo:focus-visible, #delegate-chooser button:focus-visible { outline-offset: -4px; }
#delegate-chooser { left: 50%; transform: translateX(-50%); bottom: calc(var(--edge) + var(--dock-h) + 8px + env(safe-area-inset-bottom));
  width: max-content; max-width: calc(100vw - 2 * var(--edge) - env(safe-area-inset-left) - env(safe-area-inset-right)); box-sizing: border-box;
  padding: 8px; z-index: 12; background: #18161d; border-color: #b9790c; }
#dc-title { margin: 0 0 6px; font-size: 14px; overflow-wrap: anywhere; }
.dc-roles { display: grid; grid-template-columns: repeat(4, minmax(64px, auto)); gap: 6px; }
#delegate-chooser button { padding: 12px 26px 4px 10px; }
#delegate-chooser button[data-role="cancel"] { border-color: #958da1; }
@media (max-width: 400px) { .dc-roles { grid-template-columns: repeat(2, minmax(64px, 1fr)); } }

#minimap-box { padding: 4px; box-sizing: border-box; height: calc(var(--mm) + 10px); }
#minimap { display: block; width: var(--mm); height: var(--mm); border-radius: 4px; cursor: crosshair; touch-action: none; }
#minimap-box.large { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); height: auto; z-index: 30; }
#minimap-box.large #minimap { width: min(78vmin, 720px); height: min(78vmin, 720px); }

/* first-run hint: above the unit card (the event feed takes the right side) */
#tip { bottom: calc(var(--edge) + var(--dock-h) + 10px + env(safe-area-inset-bottom)); left: calc(var(--edge) + env(safe-area-inset-left)); margin: 0; padding: 8px 14px; font-size: 14px; max-width: min(460px, 40vw); pointer-events: none; }
#tip[hidden] { display: none; }
#toasts { position: fixed; top: calc(var(--top-h) + 64px); left: 50%; transform: translateX(-50%); display: grid; gap: 6px; pointer-events: none; z-index: 11; }
#toasts p { margin: 0; padding: 6px 12px; background: var(--panel); border-radius: 6px; font: 15px Georgia, serif; text-align: center; animation: fade 5s forwards; }
@keyframes fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---- on the field: box select, ghost label, casualty numbers ----------------------------------------- */
#boxsel { position: fixed; border: 1.5px dashed #f4f0e4; background: rgba(120, 170, 255, 0.12); pointer-events: none; z-index: 6; }
#boxsel[hidden] { display: none; }
#ghost-label { position: fixed; left: 0; top: 0; margin: 0; padding: 3px 8px; border-radius: 4px; background: rgba(14, 18, 34, 0.86); color: #eef3ff; font: 600 12px "Helvetica Neue", Arial, sans-serif;
  white-space: nowrap; pointer-events: none; z-index: 5; will-change: transform; }
#ghost-label[hidden] { display: none; }
#ticks { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
#ticks span { position: absolute; left: 0; top: 0; font: bold 13px "Helvetica Neue", Arial, sans-serif; color: #ffd0c4; text-shadow: 0 1px 2px #000, 0 0 3px #000; will-change: transform, opacity; }
#ticks span.us { color: #cfe0ff; }

/* ---- brigade markers: a small national flag on a staff, a strength bar tinted and patterned by morale --- */
#markers { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.marker-link { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.marker-link path { fill: none; stroke-linecap: round; }
.marker-link-back { stroke: #17151a; stroke-width: 3.5px; }
.marker-link-front { stroke: #eee7d8; stroke-width: 1.5px; stroke-dasharray: 3 3; }
.marker { position: absolute; left: 0; top: 0; pointer-events: auto; background: none; border: 0; padding: 0 4px; min-width: 44px; min-height: 44px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px rgba(0,0,0,0.9); will-change: transform; touch-action: none; -webkit-tap-highlight-color: transparent; z-index: 1; }
.marker svg { width: calc(34px * var(--marker-scale, 1)); height: calc(30px * var(--marker-scale, 1)); filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); }
.marker .mstr { display: flex; align-items: center; gap: 3px; margin-top: 1px; }
.marker .sbar { position: relative; width: calc(36px * var(--marker-scale, 1)); height: calc(6px * var(--marker-scale, 1)); border: 1px solid rgba(0,0,0,0.85); background: rgba(10,10,12,0.75); border-radius: 2px; overflow: hidden; box-sizing: content-box; }
.marker .sbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #5fbf3a; }
.marker.m-shaken .sbar i { background: repeating-linear-gradient(-45deg, #e8c43a 0 3px, #8a6d12 3px 5px); }
.marker.m-wavering .sbar i { background: repeating-linear-gradient(90deg, #f08a2a 0 4px, transparent 4px 7px); }
.marker.m-routing .sbar i { background: transparent; box-shadow: inset 0 0 0 1.5px #ff6b5a; }
.marker .glyph { font: bold 11px "Helvetica Neue", Arial, sans-serif; min-width: 10px; line-height: 1; }
.marker .str { font-size: 11px; font-weight: bold; line-height: 1; font-variant-numeric: tabular-nums; }
.marker .hf { display: none; position: absolute; top: 0; right: 0; font: bold 10px "Helvetica Neue", Arial, sans-serif; background: #6a3a22; color: #ffe2c8; border-radius: 3px; padding: 0 3px; text-shadow: none; }
.marker.holdfire .hf { display: block; }
.marker .info { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: 2px 6px; border-radius: 4px; background: rgba(12, 10, 14, 0.85); white-space: nowrap; text-shadow: none; text-align: center; }
.marker.info-below .info { top: 100%; bottom: auto; }
.marker:hover .info, .marker.selected .info, .marker:focus-visible .info { display: block; }
.marker .nm { display: block; font: bold 13px "Helvetica Neue", Arial, sans-serif; }
.marker .cmd { display: block; font: 12px Georgia, serif; color: #e9dfc6; }
.marker .cmd:empty { display: none; }
.marker .st { display: block; font: 600 11px "Helvetica Neue", Arial, sans-serif; color: #d9d3c4; }
/* what the brigade is doing, under its flag (look.statusWords) */
.marker .act { font: 600 11px "Helvetica Neue", Arial, sans-serif; white-space: nowrap; padding: 1px 5px; margin-top: 2px; border-radius: 3px; background: rgba(12, 10, 14, 0.75); text-shadow: none; }
body.no-status-words .marker .act { display: none; }
.marker .act.idle { color: #d9d3c4; }
.marker .act.move { color: #9fd0ff; }
.marker .act.hot { color: #ffb15c; }
.marker .act.warn { color: #ffd34d; }
.marker .act.bad { color: #ff9a8a; }
.marker.selected svg { filter: drop-shadow(0 0 5px #b9ff7a) drop-shadow(0 0 2px #b9ff7a); }
.marker.selected .nm { color: #d8ffb0; }
.marker.m-routing svg { opacity: 0.7; }
.marker.hidden { display: none; }

dialog { background: #1d1a22; color: var(--text); border: 1px solid var(--panel-edge); border-radius: 10px; max-width: min(600px, 92vw); padding: 18px 22px; -webkit-user-select: text; user-select: text; }
dialog::backdrop { background: rgba(0,0,0,0.55); }
dialog h2 { margin: 0; font: normal 24px Georgia, serif; }
dialog h3 { margin: 14px 0 4px; font: normal 17px Georgia, serif; }
dialog .sub { margin: 2px 0 12px; color: var(--dim); }
dialog fieldset { border: 1px solid var(--panel-edge); border-radius: 6px; display: flex; gap: 16px; padding: 6px 12px 10px; }
#menu fieldset { flex-wrap: wrap; gap: 4px 16px; }
#menu fieldset label { display: inline-flex; align-items: center; min-height: 44px; }
#menu label.row { display: flex; align-items: center; min-height: 44px; }
dialog .row { display: block; margin: 10px 0; }
dialog .keys { margin: 0; padding-left: 18px; }
dialog .small { font-size: 13px; color: var(--dim); }
dialog button, #result button { margin-top: 12px; min-height: 44px; padding: 6px 16px; background: #f1ece0; color: #1d1a16; border: 0; border-radius: 4px; cursor: pointer; }
#result { margin: auto; padding: 18px 26px; text-align: center; width: min(520px, calc(100vw - 68px)); max-height: calc(100dvh - 64px); overflow-y: auto; z-index: 20; }
#result h2 { margin: 0 0 6px; font: normal 28px Georgia, serif; }
#result button { min-height: 48px; }
#result button[hidden] { display: none; }

/* The sandbox panel (src/sandbox/sandbox.css) docks on wide mouse screens: move the strip, dock and feed out
   from under it. (Its own rules for #orders/#balance/#perf predate the dock and no longer move anything.) */
@media (min-width: 900px) and (pointer: fine) {
  body.sb-open-right #topbar, body.sb-open-right #dock, body.sb-open-right #feed { right: calc(var(--sb-w, 360px) + var(--edge)); }
  body.sb-open-left #topbar, body.sb-open-left #dock, body.sb-open-left #objective, body.sb-open-left #army, body.sb-open-left #tip { left: calc(var(--sb-w, 360px) + var(--edge)); }
}
/* the compare toolbar sits above the dock, not on it */
body .sb-cmp-bar { bottom: calc(var(--dock-h) + var(--edge) + 14px + env(safe-area-inset-bottom)); }
/* A tall narrow dock must not sit behind the closed workbench's left toggle. */
body .sb-toggle.sb-left.sb-closed {
  top: min(50%, calc(100dvh - var(--dock-h) - var(--edge) - env(safe-area-inset-bottom) - 32px));
}
body .sb-toggle.sb-closed:not(.sb-left) {
  top: max(calc(100px + env(safe-area-inset-top)), calc(var(--edge) + var(--top-h) + env(safe-area-inset-top) + 8px));
}

@media (max-width: 1100px) {
  :root { --mm: 128px; --dock-card-w: 300px; --dock-card-h: 142px; --dock-order-w: 78px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile .val { font-size: 17px; }
  .clocktext { min-width: 0; }
}
@media (max-width: 760px) {
  :root { --dock-card-w: 230px; --dock-order-w: 64px; }
  .uchead { grid-template-columns: 1fr; }
  .portrait { display: none; }
  #orders button { font-size: 12px; }
  #perf { display: none; }
}

/* Available space, including the workbench, selects these layouts in Hud. */
#dock[data-layout="compact"] { grid-template-columns: minmax(180px, 1fr) 224px 100px; }
#dock[data-layout="compact"] #unitcard { width: 100%; height: 160px; }
#dock[data-layout="compact"] #orders { grid-template-columns: repeat(3, 66px); }
#dock[data-layout="compact"] #orders button { width: 66px; font-size: 12px; }
#dock[data-layout="compact"] #minimap, #dock[data-layout="stacked"] #minimap { width: 90px; height: 90px; }
#dock[data-layout="compact"] #minimap-box, #dock[data-layout="stacked"] #minimap-box { height: 100px; }
#dock[data-layout="stacked"] { grid-template-columns: minmax(0, 1fr) 100px; }
#dock[data-layout="stacked"] #unitcard { width: 100%; height: 160px; }
#dock[data-layout="stacked"] #minimap-box { grid-column: 2; grid-row: 1; }
#dock[data-layout="stacked"] #orders { grid-column: 1 / -1; width: 100%; grid-template-columns: repeat(3, minmax(48px, 1fr)); }
#dock[data-layout="stacked"] #orders button { width: 100%; }
#dock[data-layout="compact"] .portrait, #dock[data-layout="stacked"] .portrait { display: none; }
#dock[data-layout="compact"] .uchead, #dock[data-layout="stacked"] .uchead { grid-template-columns: 1fr; }
#dock[data-layout="compact"] .tiles, #dock[data-layout="stacked"] .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#dock[data-layout="compact"] .tile, #dock[data-layout="stacked"] .tile { height: 48px; }
#dock #minimap-box.large { height: auto; }
#dock #minimap-box.large #minimap { width: min(78vmin, 720px); height: min(78vmin, 720px); }
@media (max-height: 400px) {
  #dock[data-layout="compact"] #unitcard, #dock[data-layout="stacked"] #unitcard { height: 110px; }
}
@media (min-height: 401px) and (max-height: 520px) {
  #dock[data-layout="stacked"] #unitcard { height: clamp(110px, calc(100dvh - var(--top-h) - 304px - env(safe-area-inset-top) - env(safe-area-inset-bottom)), 160px); }
}

@media (max-width: 760px) { #tip { max-width: calc(100vw - 48px); } }
@media (max-width: 760px) {
  /* Keep both native reading panes beside the closed 48px workbench target. */
  body:has(.sb-toggle.sb-closed) #army,
  body:has(.sb-toggle.sb-closed) #field-stores {
    width: min(312px, calc(100vw - 76px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  }
  body:has(.sb-toggle.sb-left.sb-closed) #army { left: calc(var(--edge) + 60px + env(safe-area-inset-left)); }
  body:has(.sb-toggle.sb-closed:not(.sb-left)) #field-stores { right: calc(var(--edge) + 60px + env(safe-area-inset-right)); }
  body:has(.sb-toggle.sb-left.sb-closed) #tip,
  body:has(.sb-toggle.sb-left.sb-closed) #intro-hint,
  body:has(.sb-toggle.sb-left.sb-closed) #keyboard-targeting {
    left: calc(var(--edge) + 60px + env(safe-area-inset-left));
    right: calc(var(--edge) + env(safe-area-inset-right));
    max-width: min(430px, calc(100vw - 84px)); box-sizing: border-box;
  }
  body:has(.sb-toggle.sb-closed:not(.sb-left)) #tip,
  body:has(.sb-toggle.sb-closed:not(.sb-left)) #intro-hint,
  body:has(.sb-toggle.sb-closed:not(.sb-left)) #keyboard-targeting {
    left: calc(var(--edge) + env(safe-area-inset-left));
    right: calc(var(--edge) + 60px + env(safe-area-inset-right));
    max-width: min(430px, calc(100vw - 84px)); box-sizing: border-box;
  }
}

/* Full instructions remain native reading regions in the space between objective and dock. */
#tip, #intro-hint, #keyboard-targeting { pointer-events: auto; overflow-x: hidden; overflow-y: auto; overflow-wrap: anywhere;
  overscroll-behavior: contain; touch-action: pan-y; box-sizing: border-box; min-height: 44px;
  max-height: min(180px, calc(100dvh - var(--top-h) - var(--dock-h) - var(--objective-h) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  bottom: calc(var(--edge) + var(--dock-h) + 2px + env(safe-area-inset-bottom)); padding: 4px 6px; font-size: 14px; background: #18161d; }
#objective:focus-visible, #tip:focus-visible, #intro-hint:focus-visible, #keyboard-targeting:focus-visible { outline-offset: -4px; }

/* The held lens hides projected map furniture, retaining its native layout and focus semantics. */
body.soldier-view #markers, body.soldier-view #field-crates, body.soldier-view #ticks,
body.soldier-view #ghost-label { visibility: hidden; }
body.soldier-view #tip, body.soldier-view #intro-hint { display: none; }
#soldier-view-hint { position: fixed; left: calc(var(--edge) + env(safe-area-inset-left));
  right: calc(var(--edge) + env(safe-area-inset-right)); bottom: calc(var(--edge) + var(--dock-h) + 2px + env(safe-area-inset-bottom));
  width: max-content; max-width: calc(100vw - 2 * var(--edge) - env(safe-area-inset-left) - env(safe-area-inset-right));
  max-height: calc(100dvh - var(--top-h) - var(--dock-h) - var(--objective-h) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  min-height: 44px; box-sizing: border-box; margin: 0; padding: 8px 10px; font-size: 14px; line-height: 1.4;
  color: #f5f0e8; background: #18161d; overflow-wrap: anywhere; overflow-y: auto; pointer-events: none; z-index: 10; }
#soldier-view-hint[hidden] { display: none; }
@media (min-width: 900px) {
  body.sb-open-left #soldier-view-hint { left: calc(var(--sb-w, 360px) + var(--edge) + env(safe-area-inset-left)); }
  body.sb-open-left #soldier-view-hint, body.sb-open-right #soldier-view-hint {
    max-width: calc(100vw - var(--sb-w, 360px) - 2 * var(--edge) - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
}
body:has(.sb-toggle.sb-left.sb-closed) #soldier-view-hint { left: calc(var(--edge) + 60px + env(safe-area-inset-left)); max-width: calc(100vw - 84px); }
body:has(.sb-toggle.sb-closed:not(.sb-left)) #soldier-view-hint { right: calc(var(--edge) + 60px + env(safe-area-inset-right)); max-width: calc(100vw - 84px); }
@media (max-width: 760px) {
  #objective { left: calc(var(--edge) + env(safe-area-inset-left)); right: calc(var(--edge) + env(safe-area-inset-right)); max-width: none; }
  body:has(.sb-toggle.sb-left.sb-closed) #objective { left: calc(var(--edge) + 60px + env(safe-area-inset-left)); }
  body:has(.sb-toggle.sb-closed:not(.sb-left)) #objective { right: calc(var(--edge) + 60px + env(safe-area-inset-right)); }
}

/* Scheduled arrivals: wrap the complete reason and retain readable native actions. */
#banner { background: #18161d; box-sizing: border-box; flex-wrap: wrap; width: max-content; max-width: calc(100vw - 16px); }
#banner-text { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
#banner button { flex: none; }
#feed { box-sizing: border-box; max-height: 176px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
#feed button { min-height: 44px; font-size: 14px; }
#feed button span { min-width: 0; overflow-wrap: anywhere; }
#feed button:focus-visible { outline-offset: -4px; }
@media (max-width: 600px) {
  #banner { top: calc(var(--edge) + var(--top-h) + var(--objective-h) + 10px + env(safe-area-inset-top)); }
  #banner-text { flex-basis: 100%; }
  #banner button { padding: 0 12px; }
  #feed { width: min(330px, calc(100vw - 16px)); max-height: 64px; bottom: calc(var(--edge) + var(--dock-h) + 120px + env(safe-area-inset-bottom)); }
}

/* Command: "Commander down" on a brigade's marker and card, the card's rally line and regiment list, the regiment
   tooltip (field hover or a focused regiment) and the generals' star markers. */
.marker .cdn { display: none; font: bold 10px "Helvetica Neue", Arial, sans-serif; background: #4a2226; color: #ffd9d2; border-radius: 3px; padding: 0 4px; margin-top: 2px; white-space: nowrap; text-shadow: none; }
.marker.cmd-down .cdn { display: block; }
.marker.cmd-down .cmd { color: #ffb4a8; }
.portrait.down { filter: grayscale(1) brightness(0.7); }
.uccommand { margin: 4px 0 0; font-size: 12px; color: #c9e3a8; overflow-wrap: anywhere; }
.uccommand.down { color: #ffb4a8; font-weight: 600; }
.uccommand[hidden], .ucregs[hidden] { display: none; }
.ucregs { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 4px; font-size: 12px; color: var(--dim); }
.ucregs li { padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); cursor: default; }
.ucregs li:hover, .ucregs li:focus-visible { color: var(--text); background: rgba(255, 255, 255, 0.14); }
.ucregs li:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
#regiment-tip { position: fixed; left: 0; top: 0; z-index: 30; max-width: min(320px, calc(100vw - 8px)); margin: 0; padding: 3px 8px; border-radius: 4px;
  background: rgba(14, 18, 34, 0.9); color: #eef3ff; font: 600 12px "Helvetica Neue", Arial, sans-serif; pointer-events: none; box-sizing: border-box; }
#regiment-tip[hidden] { display: none; }
.gmarker { position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; align-items: center; gap: 3px; min-width: 44px; min-height: 44px; padding: 0 6px;
  background: none; border: 0; cursor: pointer; color: var(--text); font: 600 12px Georgia, serif; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; }
.gmarker .gstar { font-size: 16px; line-height: 1; }
.gmarker.us .gstar { color: #a9c4ff; }
.gmarker.cs .gstar { color: #ffb4a2; }
.gmarker .gname { padding: 1px 4px; border-radius: 3px; background: rgba(12, 10, 14, 0.7); }
.gmarker.selected .gname { color: #d8ffb0; box-shadow: 0 0 0 1px #b9ff7a; }
.gmarker.down { opacity: 0.7; }
.gmarker.down .gstar { color: #c9c2b4; }
.gmarker.hidden { display: none; }
.gmarker:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }

/* Settings (src/ui/settings-panel.js): the strip's button; the panel brings its own stylesheet. */
#settings-btn { font-size: 20px; line-height: 1; }

/* Feedback readability (DECISIONS 0109): the event feed and toasts read over the field without a box. Each row hugs its
   text with a translucent backing and a text shadow; the feed shows its 3 newest rows (older ones scroll up out of view,
   still reachable by keyboard, wheel and touch) and never reaches the objective line or the dock. */
#feed.panel { background: none; border: 0; box-shadow: none; border-radius: 0; }
#feed { padding: 0; gap: 3px; justify-items: end; scrollbar-width: none;
  max-height: min(138px, calc(100dvh - var(--top-h) - var(--objective-h) - var(--dock-h) - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
#feed::-webkit-scrollbar { display: none; }
#feed li { display: flex; justify-content: flex-end; min-width: 0; max-width: 100%; }
#feed button { width: auto; max-width: 100%; min-height: 44px; gap: 0; align-items: center; padding: 0; background: none;
  text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, 0.85); }
#feed button:hover { background: none; }
#feed button time, #feed button span { padding: 3px 7px; background: rgba(14, 12, 18, 0.62); line-height: 1.3; }
#feed button time { border-radius: 4px 0 0 4px; padding-right: 3px; }
#feed button span { border-radius: 0 4px 4px 0; }
#feed button:hover time, #feed button:hover span { background: rgba(14, 12, 18, 0.8); }
#feed button:disabled { cursor: default; }
#toasts { top: calc(var(--edge) + var(--top-h) + var(--objective-h) + 10px + env(safe-area-inset-top)); justify-items: center; gap: 4px;
  max-width: min(560px, calc(100vw - 24px)); }
#toasts p { padding: 4px 10px; background: rgba(14, 12, 18, 0.62); border-radius: 4px; text-shadow: 0 1px 2px #000, 0 0 4px rgba(0, 0, 0, 0.85);
  overflow-wrap: anywhere; }
@media (max-width: 600px) {
  /* narrow: the unit card stands above the dock, so a bottom-anchored feed rose into the objective line; hang the one
     visible row under the objective instead, and the toasts under it */
  #feed { top: calc(var(--edge) + var(--top-h) + var(--objective-h) + 8px + env(safe-area-inset-top)); bottom: auto;
    max-height: min(46px, calc(100dvh - var(--top-h) - var(--objective-h) - var(--dock-h) - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
  #toasts { top: calc(var(--edge) + var(--top-h) + var(--objective-h) + 60px + env(safe-area-inset-top)); }
  /* an arrival banner takes the place under the objective: the feed returns to its place above the dock meanwhile */
  body:has(#banner:not([hidden])) #feed { top: auto; bottom: calc(var(--edge) + var(--dock-h) + 120px + env(safe-area-inset-bottom)); }
}
/* Unit card portrait (P6b, src/ui/art.js): period portraits and the silhouette are 4:5, so keep the head in the square. */
.portrait[data-portrait="sourced"], .portrait[data-portrait="generic"] { background-position: center 18%; background-color: #2a2218; }
/* Temperament (P3t; src/ui/hud.js fillTraits / openTraits): an enemy card's commanders' traits, the game rule they drive, the
   provenance and a record note; "Records and sources" opens #traits-dialog (claims and opened sources, shared .traits-man markup
   with the Briefing). */
.uctraits { margin: 4px 0 0; padding: 4px 6px; border-radius: 6px; background: rgba(200, 56, 74, 0.1); border-left: 3px solid #c8384a; font-size: 12px; }
.uctraits[hidden] { display: none; }
.uctraits p { margin: 2px 0; line-height: 1.35; overflow-wrap: anywhere; }
.uct-who { font-weight: 700; }
.uct-chip { display: inline-block; padding: 0 6px; border-radius: 9px; background: rgba(255, 210, 122, 0.16); color: #ffe6b8; white-space: nowrap; }
.uct-prov { color: var(--dim); white-space: nowrap; }
.uct-rule { color: #c9e3a8; }
.uct-note { color: #ffd9d2; }
.uctraits .uct-more { min-height: 44px; margin: 2px 0 0; padding: 4px 10px; border: 1px solid var(--panel-edge); border-radius: 4px; background: rgba(255, 255, 255, 0.06); cursor: pointer; font-size: 12.5px; }
.uctraits .uct-more:hover { background: rgba(255, 255, 255, 0.14); }
#traits-dialog { box-sizing: border-box; width: min(640px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: auto; }
#traits-dialog h2 { overflow-wrap: anywhere; }
#traits-dialog h2:focus { outline: none; }
#traits-dialog h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.traits-man { margin: 10px 0 0; padding-top: 6px; border-top: 1px solid var(--panel-edge); }
.traits-man .traits-name { margin: 6px 0 4px; font: normal 17px/1.3 Georgia, serif; overflow-wrap: anywhere; }
.traits-man p { margin: 4px 0; line-height: 1.45; overflow-wrap: anywhere; }
.traits-prov { font-size: 13px; color: var(--dim); }
.traits-note { font-size: 13.5px; }
.traits-note.is-record { padding: 6px 8px; border-left: 3px solid #c8384a; background: rgba(200, 56, 74, 0.1); color: #ffe2dc; }
.traits-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.traits-label { font-weight: 700; color: #ffe6b8; }
.traits-rule { font-size: 13px; color: #c9e3a8; }
.traits-claim { font-size: 13.5px; }
.traits-sources { margin: 2px 0 0; padding-left: 18px; font-size: 13px; }
.traits-sources li { margin: 4px 0; overflow-wrap: anywhere; }
.traits-sources a, .traits-note a, .traits-command-sources a { color: var(--focus); }
.traits-sources a, .traits-command-sources a { display: inline-block; min-height: 24px; padding: 2px 0; }
.traits-cite { color: var(--dim); }
.traits-quote { display: block; margin: 2px 0 0; font-style: italic; color: var(--text); }
#traits-close { min-width: 120px; }
/* The unit card's name line as the officer card's opener (v4): #uc-officer wraps #uc-name in the same row (no second line).
   Drawn 28 px tall; its ::before widens the target to 44 px, 8 px into the card's top padding and 8 px below (the row's
   margin plus the button's own 2 px), so it never covers the portrait or the tiles. #uc-name is positioned so its text,
   not the pseudo-element, is what a point on the name hits (tools/test-dock-ui.mjs card-identity-hit). */
#uc-officer { position: relative; flex: 0 1 auto; min-width: 0; max-width: 100%; min-height: 28px; margin: 0 0 2px; padding: 4px 8px; box-sizing: border-box;
  font: inherit; color: var(--text); text-align: left; cursor: pointer; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 4px; }
#uc-officer::before { content: ''; position: absolute; left: -1px; right: -1px; top: -9px; bottom: -9px; }
#uc-officer #uc-name { position: relative; display: block; }
#uc-officer:hover { background: rgba(255, 255, 255, 0.14); }
#uc-officer:focus-visible { outline-offset: -3px; }
.ucname:has(> #uc-officer) { align-items: center; }