/* Visual contract: art/concepts/ui-redesign-2026-09-20. Content stays live DOM. */
@font-face { font-family: 'Command Stencil'; src: url('./assets/fonts/BlackOpsOne-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Field Sans'; src: url('./assets/fonts/Barlow-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Field Sans'; src: url('./assets/fonts/Barlow-SemiBold.ttf') format('truetype'); font-weight: 600 900; font-display: swap; }
@font-face { font-family: 'Command'; src: url('./assets/fonts/BarlowCondensed-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Command'; src: url('./assets/fonts/BarlowCondensed-SemiBold.ttf') format('truetype'); font-weight: 600 900; font-display: swap; }
:root {
  --command: #17241e; --command-deep: #101b17; --command-raised: #24352a;
  --canvas: #ece3cc; --paper: #e9dfc5; --ink: #202a22; --brass: #d9b66e;
  --line: #9d967c; --olive: #354c39; --muted: #5b6152; --chrome-line: #79816b60;
  --paper-surface: radial-gradient(ellipse at 20% 0%, #fff8e742, transparent 65%), repeating-linear-gradient(3deg, #756a4e06 0 1px, transparent 1px 4px), linear-gradient(110deg, #ece4ce, #ded1af);
  font-family: 'Field Sans', sans-serif; font-size: 17px; line-height: 1.35;
  background: var(--command-deep); color: var(--ink); color-scheme: light;
}
* { scrollbar-width: thin; scrollbar-color: #8d9476 #26372c35; }
#app { grid-template-columns: 164px minmax(0, 1fr); grid-template-rows: 70px minmax(0,1fr) auto auto; background: radial-gradient(ellipse at 70% 0%, #40503940, transparent 55%), var(--command-deep); }
#app>header { grid-column: 1/-1; grid-row: 1; background: linear-gradient(110deg, #26352b, #15221c 65%); border-bottom: 1px solid var(--chrome-line); gap: 32px; padding: 0 24px; }
.brand { font: 30px 'Command Stencil', sans-serif; letter-spacing: .18em; padding-right: 28px; border-right: 1px solid var(--chrome-line); }
.status-bar { font-size: .92rem; gap: 30px; }
.status-bar__resources { gap: 28px; }
.stat-badge { display: flex; flex-direction: column; gap: 0; padding-left: 22px; border-left: 1px solid var(--chrome-line); }
.stat-badge__label { color: #c8c9af; font-size: .77rem; letter-spacing: .04em; }
.stat-badge__value { color: #faf2d9; font-size: 1.05rem; }
#app>nav { grid-column: 1; grid-row: 2/4; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 16px 0 8px; overflow-x: hidden; overflow-y: auto; background: linear-gradient(#14231ef0 60%, #19291cd9), url('./assets/regions/mountain.png') center bottom/auto 65% no-repeat; border-right: 1px solid var(--chrome-line); }
#app>nav>button { display: flex; align-items: center; gap: 13px; min-height: 54px; padding: 10px 20px; font-size: 1.05rem; text-align: left; border: 0; border-bottom: 1px solid #83927622; border-left: 3px solid transparent; border-radius: 0; color: var(--canvas); background: transparent; }
#app>nav>button .gear-icon { width: 23px; height: 23px; margin: 0; flex-shrink: 0; }
#app>nav>button[aria-current] { color: #ffe0a0; border-left-color: var(--brass); background: linear-gradient(90deg, #b99f5150, #9e945317); box-shadow: inset 0 1px #c8ad6650, inset 0 -1px #c8ad6630; }
#app>nav>button:hover { background-color: #a9ad6e1a; }
#app>nav>.filter { margin: 16px 12px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: #c8c9af; }
#app>nav>.filter select { width: 100%; max-width: 100%; font-size: .84rem; background: #1c2b22; color: var(--canvas); border-color: var(--chrome-line); }
#app>nav>.nav-spacer { min-height: 12px; }
#app>nav>button[data-action=saveMenu] { flex-wrap: wrap; gap: 4px 12px; }
.autosave-caption { flex-basis: 100%; padding-left: 35px; font-size: .6rem; }
#app>main { grid-column: 2; grid-row: 2; padding: 0 20px 14px; gap: 10px; }
#app>#message { grid-column: 2; grid-row: 3; background: #26372a; }
#app>footer { grid-column: 1/-1; grid-row: 4; min-height: 62px; padding: 9px 18px; background: linear-gradient(90deg, #243229, #14221c); border-top: 1px solid var(--chrome-line); box-shadow: 0 -5px 20px #0003; }
button { font-weight: 600; border-radius: 2px; background: linear-gradient(#4a5d43, #2c432f); color: #f9f0d6; border-color: #9ca28a; box-shadow: inset 0 0 0 2px #ffffff05; }
button:hover:not(:disabled) { background: #51674b; }
button:disabled { background: #d1cbb7; color: #555e50; box-shadow: none; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline: 3px solid #d99b39; outline-offset: 3px; }
input,select { border-radius: 1px; }
footer button { min-height: 40px; }
footer [data-action=advanceDay], [data-action=dispatch] { background: linear-gradient(120deg, #edd59b, #bb9854); color: #19261d; border: 1px solid #f4d790; font-weight: 700; }
footer [data-action=advanceDay]:hover:not(:disabled), [data-action=dispatch]:hover:not(:disabled) { background: #f2d89e; }
footer [data-action=advanceDay]:disabled, [data-action=dispatch]:disabled { background: #525d4c; color: #c1c4ad; border-color: #78816c; }
footer .latest-event { font-size: .88rem; color: #e3dcc2; }
.command-heading { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; min-height: 108px; padding: 14px 0; color: var(--canvas); border-bottom: 1px solid var(--chrome-line); gap: 20px; }
.command-heading h1 { margin: 0; font: clamp(1.7rem, 3vw, 2.65rem)/1.1 'Command Stencil', sans-serif; text-transform: uppercase; letter-spacing: .045em; }
.command-heading p { margin: 8px 0 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .23em; color: #c3c4a7; }
.command-vignette { align-self: stretch; flex: 0 0 230px; padding: 14px 20px; font-size: .85rem; font-style: italic; letter-spacing: .12em; text-transform: uppercase; color: #283027; background: linear-gradient(90deg, #eee3cdd9, #e4d3b163), url('./assets/regions/mountain.png') center 43%/cover; border: 1px solid #b4a47a; box-shadow: 3px 3px 0 #0004; transform: rotate(-1deg); }
h2,h3 { font-family: 'Command', sans-serif; font-weight: 600; }
.panel { background: var(--paper-surface); border-color: #aea486; padding: 16px; }
.panel>h2 { font-size: 1.1rem; }
.base-panel>h2,.assignment-panel>h2,.dossier-panel>h2,.intel-terminal-panel>h2 { display: none; }
.base-panel,.contract-board,.assignment-panel,.dossier-panel { background: transparent; color: var(--canvas); border: 0; padding: 0; }
.contract-board>h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #cbcbb2; font-size: .86rem; margin: 0 0 6px; }
.contract-board>h2 button { margin: 0; }
.base-panel>.panel-scroll { grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; overflow: hidden; }
.base-art { border: 1px solid #988d65; box-shadow: 0 4px 20px #0006; }
.base-art>img { object-fit: cover; object-position: center; }
.base-marker { background: linear-gradient(#26372bec, #15221ced); border-color: #d2c6a4; min-height: 38px; padding: 6px 12px; font-size: .83rem; box-shadow: 0 3px 8px #0008; }
.base-marker::after { content: ''; position: absolute; width: 15px; height: 15px; border: 2px solid #e3d8b0; background: #7c8162b0; border-radius: 50%; top: calc(100% + 9px); left: calc(50% - 8px); box-shadow: 0 0 0 5px #ded2a53a; pointer-events: none; }
.base-marker[aria-pressed=true]::after { background: #d2ad59b0; border-color: #ffe2a0; }
.base-marker.unbuilt { opacity: .72; border-style: dashed; font-style: italic; }
.facility-detail { min-height: 0; overflow: auto; padding: 16px; background: linear-gradient(135deg, #26372b, #15231c); border: 1px solid var(--chrome-line); gap: 13px; }
.facility-detail .filter { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.facility-detail select { color: var(--canvas); background: #19291f; border-color: #9eaa8770; font-size: 1rem; }
.facility-preview { height: 148px; min-height: 100px; flex-shrink: 0; background-image: url('./assets/hq/compound.png'); background-size: 270%; border: 4px solid #c9c7ac; }
.facility-title { gap: 12px; }
.facility-title h3 { font-size: 1.4rem; text-transform: uppercase; }
.facility-level { color: #b7bca3; font-size: .85rem; letter-spacing: .14em; }
.facility-pips>span { background: #55644a; }.facility-pips>.built { background: #c0c6a0; }
.facility-detail>.muted { color: #bfc6aa; border-top: 1px solid var(--chrome-line); padding-top: 12px; }
.facility-detail .reason { color: #efb778; }
.facility-detail button { width: 100%; min-height: 42px; }
.tutorial,.inbox { background: #354732; color: #eee6cc; border: 1px solid #71845a; }
.tutorial { border-left: 3px solid var(--brass); font-size: .8rem; }
.tutorial .reason,.inbox .reason { color: #f0cb8c; }.tutorial .muted,.inbox .muted { color: #d3d8bd; }
.inbox:has(>h2:only-child) { display: none; }
.inbox { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 8px 12px; max-height: 110px; }
.inbox h2 { font-size: .92rem; }.inbox p { font-size: .8rem; }.inbox button { margin: 0; min-height: 30px; }
.facility-title>.gear-icon { color: #b9c3a3; }
.contract-board .filters { padding: 8px 0; margin-bottom: 6px; }
.contract-board .filter { color: #d1d1b9; font-size: .83rem; }
.contract-board .filter select { color: var(--canvas); background: #1d3025; border-color: #879679; font-size: .94rem; min-height: 35px; }
.contract-board>.panel-scroll { gap: 20px; padding: 9px 7px 8px 2px; }
.contract-board .contract-folder { color: var(--ink); background: var(--paper-surface); padding: 18px; gap: 9px; grid-template-columns: minmax(0,1fr) 33%; border: 1px solid #d3c2a0; border-top: 7px solid #a6936b; border-radius: 4px 10px 3px 2px; box-shadow: 3px 3px 0 #a59573, 6px 6px 0 #675e47, 0 9px 15px #0004; }
.contract-board .contract-folder.unavailable { background: var(--paper-surface); }
.contract-board .folder-label { letter-spacing: .08em; font-size: .8rem; }
.contract-board .folder-label>span { font-size: .59rem; }
.contract-board .card-title h3 { font: 1.28rem 'Command Stencil', sans-serif; text-transform: uppercase; overflow-wrap: anywhere; }
.contract-board .contract-folder .card-title { justify-content: flex-start; gap: 3px; }
.contract-board .contract-folder .card-title h3 { font: 1.28rem 'Command Stencil', sans-serif; }
.contract-board .card-title strong { font-size: 1.3rem; }
.contract-board .contract-folder p { font-size: .88rem; }
.contract-board .contract-folder .contract-brief { font-size: .96rem; line-height: 1.28; }
.contract-photo { padding: 7px 7px 14px; box-shadow: 2px 4px 6px #382d2140; }
.contract-folder .contract-photo img { filter: saturate(.78) contrast(1.05); }
.contract-folder>button { min-height: 36px; font-size: .92rem; }
.qualification-stamp { font-weight: 700; font-size: .78rem; letter-spacing: .09em; }
.contract-board .page-controls { color: #dadac0; padding-top: 12px; }
.contract-board .recruit-intake { color: #dadac0; }
.dossier-tabs { border-color: var(--chrome-line); }
.assignment-panel>.dossier-tabs>button,.operator-content>.dossier-tabs>button { color: #dadcc4; border-color: var(--chrome-line); font-size: .83rem; }
.assignment-panel>.dossier-tabs>button[aria-pressed=true],.operator-content>.dossier-tabs>button[aria-pressed=true] { background: linear-gradient(110deg, #ead49f, #bda065); color: #203021; }
.assignment-panel>.panel-scroll { min-height: 0; overflow: auto; }
.assignment-banner { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(160px,.8fr) minmax(120px,.8fr); gap: 20px; align-items: center; padding: 15px 20px; background: var(--paper-surface); color: var(--ink); border: 1px solid #a89d7c; margin: 4px 0 16px; }
.assignment-banner h3 { font: 1.65rem 'Command Stencil', sans-serif; text-transform: uppercase; }
.assignment-banner p { font-size: .87rem; }.assignment-facts { border-left: 1px solid #aa9e82; padding-left: 20px; }
.assignment-facts p:first-child { font-size: 1.2rem; font-weight: 600; }
.assignment-banner .contract-photo { margin: 0; padding: 0; transform: none; box-shadow: none; }
.assignment-banner .contract-photo::after { display: none; }.assignment-banner .contract-photo img { height: 120px; }
.assignment-panel .squad-grid { display: grid; grid-template-columns: minmax(280px,1fr) minmax(260px,1.5fr) minmax(245px,1fr); gap: 12px; margin: 0; align-items: start; }
.assignment-roster,.selected-squad,.assignment-summary { background: linear-gradient(120deg, #23372b, #16281f); border: 1px solid var(--chrome-line); padding: 12px; min-width: 0; }
.assignment-roster legend,.selected-squad>h3,.assignment-summary>h3 { text-transform: uppercase; color: #e3dec3; font-size: .94rem; letter-spacing: .08em; margin-bottom: 12px; }
.assignment-roster { margin: 0; }
.assignment-roster legend { max-width: 100%; padding-inline: 4px; overflow-wrap: anywhere; }
.candidate-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.candidate-controls .filter { display: flex; flex-direction: column; align-items: stretch; min-width: 0; font-size: .68rem; gap: 4px; }
.candidate-controls select { width: 100%; min-width: 0; min-height: 32px; padding: 4px; font-size: .78rem; color: var(--canvas); background: #1b2d22; border-color: #778769; }
.candidate-guidance { font-size: .65rem; margin: 7px 0; }
.candidate-list { max-height: 360px; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; min-width: 0; }
.candidate-list:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.assignment-roster .assignment-merc { display: block; border-color: #7a886952; padding: 8px 0; min-width: 0; }
.assignment-roster .assignment-merc>.squad-choice { display: grid; grid-template-columns: 18px 40px minmax(0,1fr); gap: 7px; font-size: .82rem; padding: 0; }
.assignment-roster .squad-choice>span { min-width: 0; overflow-wrap: anywhere; }
.assignment-roster .squad-choice .portrait { width: 40px; height: 52px; }
.assignment-roster .squad-choice input { width: 16px; min-width: 0; margin: 0; }
.assignment-roster .merc-match,.assignment-roster .skills { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.assignment-roster .skill-badge { white-space: normal; overflow-wrap: anywhere; font-size: .62rem; }
.candidate-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0 0 25px; }
.candidate-fit { font-size: .75rem; font-weight: 600; color: #e6cf91; }
.candidate-actions button { font-size: .68rem; padding: 3px 6px; min-height: 28px; }
.candidate-empty { padding: 12px 0; font-size: .8rem; }
.assignment-merc .portrait { width: 45px; height: 59px; flex-basis: 45px; }
.assignment-merc>button { margin-left: auto; min-height: 24px; flex-basis: auto; }
.assignment-roster .squad-choice:has(input:disabled) { color: #adb89e; }
.assignment-roster .muted,.selected-squad .muted,.assignment-summary .muted,.command-preparations .muted { color: #bfc9ad; }
.assignment-roster .page-controls { gap: 5px; flex-wrap: wrap; }
.assignment-roster .page-controls p { font-size: .68rem; }
.assignment-roster .page-controls button { font-size: .7rem; padding: 3px 6px; }
.selected-squad-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 10px; }
.selected-operator { position: relative; border: 1px solid #7b8b6a; min-width: 0; background: #18291f; }
.selected-operator>.portrait { width: 100%; height: auto; aspect-ratio: 4/4.4; object-fit: cover; display: block; border: 0; }
.selected-operator>button { position: absolute; z-index: 1; top: 5px; right: 5px; min-height: 26px; padding: 0 7px; background: #1a2c21e8; }
.selected-operator-info { padding: 9px; }
.selected-operator-info h3 { font-size: 1rem; text-transform: uppercase; }
.selected-operator-info h3,.operator-identity h3,.operator-identity p,.operator-directory strong,.identity-name { overflow-wrap: anywhere; }
.selected-operator-info,.operator-directory button>span,.operator-content .dossier-heading>div { min-width: 0; }
.selected-operator-info .skills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.selected-operator-info .skill-badge { font-size: .68rem; padding: 2px 4px; }
.squad-equipment { display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px; border-top: 1px solid var(--chrome-line); padding-top: 8px; gap: 8px; }
.squad-equipment .item-art { width: 100%; height: 38px; object-fit: contain; background: #d4cbae; border: 0; }
.squad-equipment .equipment-preview>span { display: block; font-size: .65rem; color: #bfc6ae; line-height: 1.2; }
.squad-empty { grid-column: 1/-1; padding: 40px 20px; text-align: center; color: #b4bfa5; }
.squad-empty>.gear-icon { width: 50px; height: 50px; margin-bottom: 12px; }
.assignment-summary { padding: 12px; border-left: 1px solid var(--chrome-line); }
.assignment-summary p { font-size: .84rem; margin-block: 8px; }
.assignment-summary .qualification-stamp.ready { color: #b7d49b; }.assignment-summary .qualification-stamp.locked { color: #f0b283; }
.assignment-summary .reason { color: #f2c18b; }.assignment-summary .assignment-intel { color: #c4cbb4; }
.assignment-summary .assignment-details { border-top: 1px solid var(--chrome-line); padding-top: 10px; }
.forecast-context { border-top: 1px solid var(--chrome-line); padding-top: 9px; margin-top: 9px; font-size: .8rem; }
.command-odds { border-top: 1px solid var(--chrome-line); border-bottom: 1px solid var(--chrome-line); padding: 10px 0; }
.command-odds meter,.attributes meter { appearance: none; border: 0; border-radius: 0; }
meter::-webkit-meter-bar { background: #6b76583a; border: 1px solid #8d927657; border-radius: 0; }
meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, #b3a17b, #92a285); border-radius: 0; }
.command-odds meter::-webkit-meter-bar { background: #50614866; border: 0; }
.command-odds meter::-webkit-meter-optimum-value { background: #adb99a; }
.command-odds .band-partial meter::-webkit-meter-optimum-value { background: #d7b26b; }
.command-odds .band-failure meter::-webkit-meter-optimum-value,.command-odds .band-disaster meter::-webkit-meter-optimum-value { background: #c36f56; }
.command-odds { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; }
.command-odds .band { display: grid; grid-template-columns: 62px minmax(0,1fr) 44px; align-items: center; gap: 8px; border: 0; padding: 0; font-size: .82rem; }
.command-odds .band>span { text-align: right; }.command-odds meter { width: 100%; height: 16px; accent-color: #bec89e; }
.command-preparations { margin-top: 14px; display: flex; align-items: center; gap: 20px; padding: 13px 16px; border: 1px solid var(--chrome-line); background: #24372a; }
.command-preparations strong { text-transform: uppercase; letter-spacing: .08em; }.command-preparations p { flex: 1; margin: 0; }
.assignment-footer { border-color: var(--chrome-line); padding-top: 10px; }.assignment-footer>.muted { color: #c2cbb0; }
.assignment-footer [data-action=dispatch] { min-height: 46px; padding: 8px 30px; font: 1.16rem 'Command Stencil', sans-serif; text-transform: uppercase; }
.assignment-panel .mission-brief { color: var(--ink); background: var(--paper-surface); padding: 16px; }
.operator-layout { display: grid; grid-template-columns: 215px 235px minmax(0,1fr); gap: 14px; flex: 1; min-height: 0; }
.operator-rail { min-width: 0; display: flex; flex-direction: column; min-height: 0; padding: 12px; border: 1px solid var(--chrome-line); background: #1d3025; }
.operator-rail>h3 { font-size: 1rem; text-transform: uppercase; padding-bottom: 12px; }
.operator-directory { min-height: 0; overflow: auto; }
.operator-directory button { display: flex; gap: 10px; padding: 10px 5px; min-width: 0; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--chrome-line); background: transparent; }
.operator-directory button[aria-pressed=true] { background: #a79a5840; box-shadow: inset 3px 0 var(--brass); }
.operator-directory .portrait { width: 45px; height: 62px; flex-basis: 45px; }
.operator-directory strong { font-size: .93rem; font-weight: 600; }.operator-directory p { margin: 2px 0; font-size: .76rem; color: #c6cbb6; }
.operator-directory .status-tag { font-size: .65rem; padding: 1px 3px; }
.operator-identity { min-height: 0; overflow: auto; padding: 14px; color: var(--ink); background: var(--paper-surface); border: 1px solid #ad9a76; box-shadow: 2px 2px #7b7056; }
.operator-identity>.portrait { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border: 6px solid #f9efda; box-shadow: 1px 3px 5px #0004; transform: rotate(-1deg); }
.operator-identity h3 { font: 1.3rem 'Command Stencil', sans-serif; text-transform: uppercase; margin-top: 14px; }
.operator-identity p { font-size: .85rem; }.identity-callsign { letter-spacing: .12em; text-transform: uppercase; }
.identity-bio { margin-top: 18px; padding-top: 14px; border-top: 1px solid #a29d80; font-style: italic; }
.operator-content { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.operator-content>.dossier-heading { background: #23382a; padding: 10px 12px; margin: 0; border: 1px solid var(--chrome-line); }
.operator-content>.dossier-heading { flex: 0 0 auto; }
.operator-content>.dossier-heading .skills { max-height: 60px; overflow-y: auto; }
.operator-content>.dossier-heading>.portrait { display: none; }.operator-content .specialty-label { color: #d3d5bc; }
.operator-content .identity-name { display: none; }
.operator-content>.dossier-heading .skill-badge { font-size: .76rem; padding: 3px 6px; }
.operator-content>.dossier-tabs { gap: 4px; padding: 10px 0; }
.operator-content>.dossier-tabs>button { padding: 5px 8px; min-height: 33px; }
.operator-content>.panel-scroll { flex: 1; background: var(--paper-surface); color: var(--ink); padding: 16px; border: 1px solid #aea486; }
.operator-content .dossier-overview { grid-template-columns: 1fr 1fr; gap: 18px; }
.operator-content .dossier-overview h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; }
.operator-content .dossier-overview p { font-size: .85rem; }
.attributes { grid-template-columns: minmax(70px,.85fr) minmax(100px,1.1fr); }
.attributes dd { display: flex; align-items: center; gap: 8px; }.attributes meter { width: 100%; min-width: 20px; height: 16px; }.attributes dd span { white-space: nowrap; font-size: .8rem; }
.operator-equipment { flex-shrink: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)) 150px; gap: 12px; border: 1px solid var(--chrome-line); background: #1c2e23; padding: 12px; margin-top: 12px; }
.operator-equipment>h3 { grid-column: 1/-1; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.operator-equipment .equipment-preview { display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: 10px; border-right: 1px solid var(--chrome-line); }
.operator-equipment .item-art { width: 80px; height: 55px; object-fit: contain; background: #d5ccb3; border: 1px solid #6b7b5f; }.operator-equipment .equipment-preview>span { font-size: .8rem; }
.personnel-panel .merc-row { min-height: 100px; padding: 10px; background: #f1e7cf66; }.personnel-panel .portrait { width: 60px; height: 78px; flex-basis: 60px; }
dialog { background: var(--paper-surface); border: 1px solid #c8b58b; box-shadow: 0 14px 80px #000a; }
dialog .dialog-heading { padding-bottom: 10px; border-bottom: 1px solid #b7a882; }
@media (min-width: 1500px) {
  #app { grid-template-columns: 174px minmax(0,1fr); }
  .base-panel>.panel-scroll { grid-template-columns: minmax(0,1fr) 315px; }
  .operator-layout { grid-template-columns: 245px 280px minmax(0,1fr); }
  .selected-squad-cards { grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); }
  .contract-board .contract-folder { padding: 12px 16px; gap: 6px; grid-template-columns: minmax(0,1fr) 165px; }
  .contract-board .contract-folder p { font-size: .83rem; }.contract-board .contract-folder .contract-brief { font-size: .89rem; }
  .selected-operator>.portrait { aspect-ratio: 4/4; }
  .assignment-roster .assignment-merc { padding: 3px 0; }
  .assignment-summary p { margin-block: 5px; font-size: .78rem; }
}
@media (max-width: 1250px) {
  #app { grid-template-columns: 130px minmax(0,1fr); grid-template-rows: 58px minmax(0,1fr) auto auto; }
  #app>nav>button { min-height: 45px; padding: 8px 10px; gap: 8px; font-size: .94rem; }
  #app>header { gap: 18px; padding-inline: 15px; }.brand { font-size: 25px; padding-right: 15px; }
  .status-bar,.status-bar__resources { gap: 18px; }.stat-badge { padding-left: 13px; }
  #app>main { padding-inline: 12px; }.command-heading { min-height: 85px; }.command-vignette { flex-basis: 180px; }
  .command-heading h1 { font-size: 1.85rem; }
  .base-panel>.panel-scroll { grid-template-columns: minmax(0,1fr) 245px; gap: 10px; }.facility-detail { padding: 12px; gap: 10px; }
  .facility-preview { height: 110px; }.facility-title h3 { font-size: 1.2rem; }
  .contract-board .contract-folder { padding: 12px; gap: 7px; }.contract-board .card-title h3 { font-size: 1.1rem; }
  .contract-board .contract-folder p { font-size: .83rem; }.contract-board .contract-folder .contract-brief { font-size: .87rem; }
  .assignment-panel .squad-grid { grid-template-columns: minmax(200px,1fr) minmax(230px,1.1fr); }
  .selected-squad { grid-column: 1/-1; grid-row: 2; }.selected-squad-cards { grid-template-columns: repeat(auto-fit,minmax(115px,1fr)); }
  .selected-operator { display: flex; flex-direction: column; }.selected-operator>.portrait { height: 150px; object-position: center 20%; }
  .squad-empty { padding: 15px; }
  .operator-layout { grid-template-columns: 175px 185px minmax(0,1fr); gap: 10px; }
  .operator-layout { grid-template-columns: 175px minmax(0,1fr); }
  .operator-identity { display: none; }
  .operator-content>.dossier-heading>.portrait { display: block; }
  .operator-content .identity-name { display: block; font-size: 1rem; }
  .operator-content>.dossier-heading .skills { max-height: 42px; }
  .operator-content>.dossier-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .operator-content>.dossier-tabs>button { flex-shrink: 0; white-space: nowrap; }
  .operator-content .training-columns { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .operator-content .kit-panel { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .operator-content .kit-control>span { min-width: 0; overflow-wrap: anywhere; }
  .operator-identity { padding: 10px; }.operator-content .dossier-overview { grid-template-columns: 1fr; gap: 12px; }
  .operator-equipment { gap: 8px; grid-template-columns: repeat(4,minmax(0,1fr)) 110px; }
  .operator-equipment .equipment-preview { gap: 6px; }.operator-equipment .item-art { width: 45px; height: 40px; }
}
@media (max-height: 820px) and (min-width: 851px) {
  .command-heading { min-height: 76px; padding-block: 9px; }.command-heading h1 { font-size: 1.8rem; }.command-heading p { margin-top: 4px; }
  .command-vignette { font-size: .7rem; padding: 8px 14px; }.facility-preview { height: 100px; min-height: 80px; }
  .facility-detail { gap: 8px; }.facility-detail p { font-size: .85rem; }
  #app>nav>button { min-height: 44px; padding-block: 8px; }
  .operator-equipment { padding: 8px; gap: 6px; }.operator-equipment .item-art { height: 36px; }
  .assignment-banner { padding: 10px 14px; gap: 12px; margin-bottom: 10px; }.assignment-banner .contract-photo img { height: 95px; }
}
@media (max-width: 850px) {
  #app { grid-template-columns: minmax(0,1fr); grid-template-rows: 58px auto minmax(0,1fr) auto auto; }
  #app>header { grid-row: 1; }.status-bar,.status-bar__resources { gap: 10px; }.stat-badge { padding-left: 8px; }
  .stat-badge__label { font-size: .65rem; }.stat-badge__value { font-size: .85rem; }
  #app>nav { grid-column: 1; grid-row: 2; flex-direction: row; overflow-x: auto; padding: 0; border-bottom: 1px solid var(--chrome-line); }
  #app>nav>button { min-height: 40px; padding: 6px 10px; font-size: .85rem; flex-shrink: 0; }
  #app>nav>button .gear-icon { width: 17px; height: 17px; }
  #app>nav>.filter { flex-direction: row; margin: 4px 8px; font-size: 0; min-width: 140px; }.autosave-caption { display: none; }
  #app>main { grid-column: 1; grid-row: 3; padding: 0 10px 10px; }
  #app>#message { grid-column: 1; grid-row: 4; }#app>footer { grid-column: 1; grid-row: 5; }
  .command-heading { min-height: 68px; }.command-heading h1 { font-size: 1.5rem; }.command-heading p { font-size: .62rem; letter-spacing: .14em; }.command-vignette { display: none; }
  .operator-layout { grid-template-columns: minmax(0,1fr); grid-template-rows: 130px minmax(430px,1fr); overflow: auto; }
  .operator-rail { grid-column: 1/-1; height: 130px; min-height: 130px; }.operator-rail>h3 { padding-bottom: 5px; }.operator-directory { display: flex; overflow: auto; min-height: 80px; }.operator-directory button { flex: 0 0 175px; }
  .operator-content { min-height: 340px; }.operator-content>.panel-scroll { overflow: visible; }
  .operator-equipment { grid-template-columns: repeat(4,minmax(0,1fr)); }.operator-equipment>button { grid-column: 1/-1; }
  .operator-equipment .equipment-preview { flex-direction: column; align-items: flex-start; }
  .base-panel>.panel-scroll { overflow: auto; grid-template-columns: minmax(0,1fr) 220px; }
  .assignment-banner { grid-template-columns: 1fr 160px; }.assignment-banner>.contract-photo { display: none; }
  .command-preparations { flex-wrap: wrap; gap: 8px; }.command-preparations p { flex-basis: 100%; }
}
@media (max-width: 600px) {
  #app>header { padding: 0 10px; gap: 10px; }.brand { font-size: 22px; padding-right: 10px; }
  .status-bar { font-size: .65rem; flex-wrap: wrap; gap: 0; }.status-bar__resources { gap: 8px; }.stat-badge { flex-direction: row; gap: 5px; padding: 0; border: 0; }
  .stat-badge__label,.stat-badge__value { font-size: .65rem; }
  .base-panel>.panel-scroll { display: flex; flex-direction: column; }.base-art { flex: 0 0 270px; }.facility-detail { flex: 0 0 auto; overflow: visible; }.facility-preview { display: none; }
  .base-marker { font-size: .65rem; min-height: 30px; padding: 4px; }.base-marker .gear-icon { width: 14px; height: 14px; }
  .contract-board>.panel-scroll { grid-template-columns: 1fr; }.contract-board>h2 { flex-wrap: wrap; }.contract-board .contract-folder { grid-template-columns: minmax(0,1fr) 100px; }
  .assignment-banner { grid-template-columns: 1fr; }.assignment-facts { border-left: 0; padding: 0; }.assignment-banner h3 { font-size: 1.2rem; }
  .assignment-panel .squad-grid { grid-template-columns: 1fr; }.selected-squad { grid-row: auto; grid-column: 1; }.assignment-summary { grid-row: auto; }
  .operator-layout { grid-template-columns: minmax(0,1fr); }.operator-identity { display: none; }.operator-content>.dossier-heading>.portrait { display: block; }
  .operator-content .identity-name { display: block; font-size: 1rem; margin-bottom: 5px; }
  .operator-content .dossier-overview { grid-template-columns: 1fr; }.operator-content>.dossier-tabs { flex-wrap: wrap; }
  .operator-equipment .item-art { width: 100%; }.operator-equipment .equipment-preview span { font-size: .65rem; }
  #app>footer { padding: 5px 8px; min-height: 50px; }footer .latest-event { font-size: .72rem; }footer button { min-height: 32px; }
  .assignment-footer [data-action=dispatch] { min-height: 38px; padding: 6px 12px; font-size: .9rem; }
}
@media (max-height: 750px) {
  /* The same live kit remains available on the Loadout tab. Prioritize the
     active dossier page over its duplicated equipment summary in short windows. */
  .operator-equipment { display: none; }
  .operator-content>.dossier-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .operator-content>.dossier-tabs>button { flex-shrink: 0; white-space: nowrap; }
}

/* Directory doctrine is deliberately distinct from the colored trust badge. */
.relation-controls { align-items: end; gap: 8px; }
.relation-controls>input,.relation-controls>select,.relation-controls>label { flex: 1 1 180px; min-width: 0; max-width: 100%; }
.relation-controls>label { display: flex; align-items: center; gap: 6px; font-size: .8rem; }
.relation-controls>label select { flex: 1; min-width: 0; width: 100%; }
.relation-card { min-width: 0; overflow-wrap: anywhere; }
.relation-card .relation-posture,.relation-profile .relation-posture { font-weight: 650; border-left: 3px solid var(--line); padding-left: 7px; }
.relation-profile { margin-block: 12px; padding: 12px; border: 1px solid var(--line); }
.relation-profile h3 { margin-top: 0; }
.relation-profile h4 { margin: 12px 0 4px; }
.relation-profile p { margin: 4px 0; }
.contract-filters .qualified-filter { flex-basis: 100%; display: flex; align-items: center; gap: 7px; font-size: .8rem; cursor: pointer; }
.qualified-filter input { width: 17px; height: 17px; margin: 0; accent-color: var(--brass); }