/* Combat Lab pages (INTEGRATION__COMBAT_LAB_SPECS.md CL4). Daniel's style call (Part B): "a deliberately plain
   Windows 3.x look ... functional, fast, clean, no unnecessary graphics". One look, light only, on purpose.
   Layout: a window (title bar, tab strip, tab page); the Units page is team panels around a centre control column. */
:root {
  --face: #c0c0c0;        /* button and window face */
  --light: #ffffff;       /* bevel highlight */
  --shadow: #808080;      /* bevel shadow */
  --dark: #000000;        /* bevel outer edge, text */
  --field: #ffffff;       /* input fields, lists */
  --title: #000080;       /* active title bar */
  --title-text: #ffffff;
  --select: #000080;      /* selected row */
  --desk: #008080;        /* the desktop behind the window */
  --good: #006400;
  --bad: #a00000;
  --ui: "Tahoma", "MS Sans Serif", "Segoe UI", Arial, sans-serif;
  --mono: "Lucida Console", "Courier New", monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--face); color: var(--dark); font: 13px/1.35 var(--ui);
  overflow: hidden;   /* CL11: the page never scrolls; each window or tab page scrolls its own content */
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
}
button, input, select { font: inherit; color: var(--dark); }
:focus-visible { outline: 1px dotted var(--dark); outline-offset: -4px; }

/* the bevels: raised (buttons, panels) and sunken (fields, lists) */
.raised { background: var(--face); border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); box-shadow: inset -1px -1px 0 var(--shadow); }
.sunken { background: var(--field); border: 2px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow); box-shadow: inset 1px 1px 0 var(--dark); }

.window { height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--face); }
.titlebar { display: flex; align-items: center; gap: 8px; background: var(--title); color: var(--title-text); font-weight: bold; padding: 3px 4px 3px 6px; }
.titlebar .box { width: 18px; height: 16px; background: var(--face); border: 1px solid var(--dark); box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--shadow); flex: none; }
.titlebar .name { flex: 1; text-align: center; letter-spacing: .02em; }
.titlebar .mode { font-weight: normal; font-size: 12px; opacity: .9; }
.titlebar .name { text-align: left; }

.banner { margin: 6px 8px 0; padding: 4px 8px; background: #ffffe1; border: 1px solid var(--dark); font-size: 12px; }

/* tabs: a strip of raised tabs; the open one joins the page below it */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 6px 0; flex: none; }
.tab { padding: 4px 14px 3px; background: var(--face); border: 2px solid; border-bottom: none; border-color: var(--light) var(--dark) var(--dark) var(--light); cursor: pointer; position: relative; top: 2px; }
.tab[aria-selected="true"] { font-weight: bold; padding-bottom: 5px; top: 0; z-index: 1; }
.tab:disabled { color: var(--shadow); cursor: default; }
.page { flex: 1; min-height: 0; margin: 0 6px 4px; padding: 8px; overflow: auto; position: relative; border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); }
.page[hidden] { display: none !important; }

.btn { padding: 4px 12px; cursor: pointer; background: var(--face); border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); box-shadow: inset -1px -1px 0 var(--shadow); }
.btn:active:not(:disabled) { border-color: var(--dark) var(--light) var(--light) var(--dark); box-shadow: inset 1px 1px 0 var(--shadow); }
.btn:disabled { color: var(--shadow); text-shadow: 1px 1px 0 var(--light); cursor: default; }
.btn.small { padding: 1px 6px; }
.btn.big { padding: 14px 18px; font-size: 16px; font-weight: bold; width: 100%; }
input[type=text], input[type=number], input[type=search], select { padding: 2px 4px; background: var(--field); border: 2px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow); box-shadow: inset 1px 1px 0 var(--dark); border-radius: 0; min-width: 0; }
input[type=number] { width: 72px; }
label { display: flex; flex-direction: column; gap: 2px; }
label.row { flex-direction: row; align-items: center; gap: 6px; }

fieldset { border: 2px groove var(--light); margin: 0; padding: 8px 10px 10px; min-width: 0; }
legend { padding: 0 4px; }
.note { color: #303030; font-size: 12px; }
.err { color: var(--bad); font-weight: bold; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
h2 { font-size: 14px; margin: 0 0 8px; }

/* UNITS (CL11/CL12): the top row, then odd teams | Unit Browser | even teams. Each column scrolls by itself. */
#page-units { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.units-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: none; }
.units-top .form { gap: 6px; }
.units-top .readout { font-family: var(--mono); background: var(--field); padding: 6px; min-height: 2.8em; white-space: pre-line; }
.run-box { display: flex; flex-direction: column; gap: 4px; }
.units-desk { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(250px, 1fr) minmax(360px, 1.5fr) minmax(250px, 1fr); gap: 8px; }
.col { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.centre-col { overflow: hidden; }
.float-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* a panel: title bar (the grip) over a body. Docked it sits in its column; dragged out it floats and resizes. */
.win { display: flex; flex-direction: column; min-width: 0; background: var(--face); border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); box-shadow: inset -1px -1px 0 var(--shadow); }
.wtitle { display: flex; align-items: center; gap: 6px; background: var(--title); color: var(--title-text); font-weight: bold; padding: 2px 6px; cursor: move; touch-action: none; user-select: none; flex: none; }
.wtitle .name { flex: 1; }
.wbody { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 6px; }
.win.float { position: absolute; pointer-events: auto; resize: both; overflow: hidden; min-width: 240px; min-height: 120px; max-width: 100%; box-shadow: inset -1px -1px 0 var(--shadow), 4px 4px 0 rgba(0,0,0,.35); }
.win.browser:not(.float) { flex: 1; min-height: 0; }
@media (max-width: 900px) {
  #page-units { overflow: auto; }
  .units-top { grid-template-columns: minmax(0, 1fr); }
  .units-desk { display: flex; flex-direction: column; flex: none; }
  .col { overflow: visible; }
  .centre-col { order: -1; min-height: 420px; }
  .win.browser { min-height: 420px; }
  .win.float { position: static !important; width: auto !important; height: auto !important; resize: none; }
}

.team .wbody { gap: 6px; }
.team .wtitle { border-left: 10px solid var(--shadow); }
.team-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: end; }
.team-head .swatch { width: 18px; height: 22px; border: 1px solid var(--dark); flex: none; }
.team-head input[type=text] { width: 110px; }
.team.drop { outline: 2px dashed var(--title); outline-offset: -4px; }
.list { overflow: auto; min-height: 60px; }
.team .list { max-height: 300px; }
.win.float .team-list, .win.float .list { max-height: none; flex: 1; }
.list table { width: 100%; border-collapse: collapse; }
.list th { position: sticky; top: 0; background: var(--face); font-weight: normal; text-align: left; padding: 2px 4px; border-right: 1px solid var(--shadow); border-bottom: 1px solid var(--shadow); white-space: nowrap; }
.list td { padding: 1px 4px; white-space: nowrap; }
.list td.name { white-space: normal; min-width: 120px; }
.list input[type=number] { width: 38px; padding: 0 2px; }
.list tr.empty td { color: var(--shadow); padding: 10px 6px; white-space: normal; }
.totals { display: flex; gap: 14px; font-size: 12px; }
.adder { display: flex; flex-direction: column; gap: 2px; }
.adder input { flex: 1; }
.hits { max-height: 180px; overflow: auto; }
.hits div { padding: 2px 6px; cursor: pointer; display: flex; gap: 8px; }
.hits div span:first-child { flex: 1; }
.hits div:hover, .hits div.on { background: var(--select); color: var(--title-text); }
.hits div.bad { color: var(--shadow); cursor: default; background: none; }

/* MAP / OPTIONS */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 12px; align-items: start; }
@media (max-width: 760px) { .split { grid-template-columns: minmax(0, 1fr); } }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 8px; }
.pick tbody tr { cursor: pointer; }
.pick tbody tr.on { background: var(--select); color: var(--title-text); }
.form { display: grid; gap: 10px; max-width: 520px; }

/* RESULTS */
.progress { height: 22px; padding: 2px; }
.progress div { height: 100%; background: repeating-linear-gradient(90deg, var(--title) 0 12px, transparent 12px 14px); width: 0; }
.stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.stats fieldset { flex: 1 1 220px; }
.stats dl { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 0; }
.stats dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.winbar { display: flex; height: 18px; margin: 6px 0; border: 1px solid var(--dark); }
.winbar div { height: 100%; }
.battles { max-height: 360px; }
.battles tbody tr { cursor: pointer; }
.battles tbody tr:hover { background: var(--select); color: var(--title-text); }

/* REPLAY */
.replay-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 8px; }
.replay-frame { width: 100%; flex: 1; min-height: 320px; border: 0; display: block; background: var(--field); }
#page-replay:not([hidden]) { display: flex; flex-direction: column; }
.status { flex: none; margin: 0 6px 6px; padding: 2px 6px; font-size: 12px; display: flex; justify-content: space-between; gap: 8px; }

/* team panels: buttons under the list */
.team-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.team-head input[type=color] { width: 44px; height: 24px; padding: 1px; background: var(--face); border: 2px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow); }

/* the Unit Browser window (moves by its title bar; resizable at the corner) */
.dialog { position: fixed; top: calc(80px + env(safe-area-inset-top, 0px)); left: 50%; margin-left: -190px; z-index: 40;
  width: min(380px, calc(100vw - 32px)); height: auto; min-width: 260px; min-height: 120px; resize: both; overflow: hidden;
  display: flex; flex-direction: column; background: var(--face); border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); box-shadow: inset -1px -1px 0 var(--shadow), 4px 4px 0 rgba(0,0,0,.4); }
.dialog[hidden] { display: none; }
.dialog .titlebar { cursor: move; touch-action: none; user-select: none; }
.closebox { width: 20px; height: 18px; padding: 0; line-height: 14px; background: var(--face); color: var(--dark); border: 1px solid var(--dark); box-shadow: inset 1px 1px 0 var(--light), inset -1px -1px 0 var(--shadow); cursor: pointer; }
.dialog-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.dialog-body .filters { margin: 0; }
.pair { display: flex; gap: 4px; }
.pair input[type=number] { width: 64px; }
.ub-list { flex: 1; min-height: 80px; max-height: none; }
#ub-list tbody tr { cursor: grab; }
#ub-list tbody tr.on { background: var(--select); color: var(--title-text); }
#ub-list tbody tr.bad { color: var(--shadow); cursor: default; }
#ub-list th[data-sort] { cursor: pointer; }
#ub-list th.sorted { font-weight: bold; }
@media (max-width: 760px) { .dialog { margin-left: 0 !important; left: max(8px, env(safe-area-inset-left, 0px)) !important; right: auto; width: calc(100vw - 16px); top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); height: 60vh; resize: none; } }

/* the stitched map grid */
.stitch-grid { display: grid; gap: 4px; margin-top: 6px; }
.stitch-grid .cell { min-height: 54px; padding: 4px; font: inherit; font-size: 12px; text-align: center; background: var(--field); border: 2px solid; border-color: var(--shadow) var(--light) var(--light) var(--shadow); cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.stitch-grid .cell.on { outline: 2px solid var(--title); outline-offset: -4px; }
#stitch-box { margin-bottom: 8px; }

/* results: the finder and the nested battle list */
.finder { margin-bottom: 8px; }
.cond { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.cond select, .cond input { max-width: 100%; }
#battle-tree { padding: 4px; max-height: 420px; }
.branch .twig { display: block; width: 100%; text-align: left; padding: 2px 4px; background: none; border: 0; cursor: pointer; font: inherit; }
.branch .twig:hover { background: var(--select); color: var(--title-text); }
.branch .twig:hover .note { color: inherit; }
.branch .sign { display: inline-block; width: 12px; text-align: center; font-family: var(--mono); }
.branch .kids { margin-left: 18px; border-left: 1px dotted var(--shadow); padding-left: 4px; }
table.leaves { width: 100%; border-collapse: collapse; }
table.leaves th { font-weight: normal; text-align: left; padding: 1px 4px; border-bottom: 1px solid var(--shadow); }
table.leaves td { padding: 1px 4px; white-space: nowrap; }
table.leaves tbody tr { cursor: pointer; }
table.leaves tbody tr:hover { background: var(--select); color: var(--title-text); }
.leaf { padding: 4px; }

/* the About box: centred, sized to its text */
.dialog.about { left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); height: auto; max-height: calc(100vh - 32px); width: min(560px, calc(100vw - 32px)); resize: none; }
.about-body { overflow: auto; }
.about-body p { margin: 0 0 8px; max-width: 65ch; }
.status-right { display: flex; gap: 8px; align-items: center; }
@media (max-width: 760px) { .dialog.about { left: 50% !important; top: 50% !important; bottom: auto; height: auto; } }

/* CL12: weight-class icons - a grip and a little 'Mech whose build grows with the class, so a unit row has something to take hold of */
.ico { width: 1%; white-space: nowrap; cursor: grab; }
.grip { color: var(--shadow); font-family: var(--mono); letter-spacing: -2px; margin-right: 2px; user-select: none; }
.cls { vertical-align: middle; width: 18px; height: 18px; fill: currentColor; }
.cls-light { color: #2e8b57; } .cls-medium { color: #a67c00; } .cls-heavy { color: #c05a00; } .cls-assault { color: #a00000; } .cls-superheavy { color: #600060; }
#adv { width: min(480px, calc(100vw - 32px)); height: min(78vh, 720px); margin-left: -240px; }
.adv-scroll { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.adv-scroll fieldset { padding: 4px 8px 6px; }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 10px; align-items: end; }
.checks { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.checks label.row { gap: 4px; }
.wrow { display: flex; gap: 4px; align-items: center; margin-bottom: 4px; }
.wrow input[type=text] { flex: 1; min-width: 0; }
.wrow input[type=number] { width: 52px; }
.pair input[type=number] { width: 70px; }
@media (max-width: 760px) { #adv { margin-left: 0; } }
.team-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* CL15: the Options tab - sub-tabs, folders, one row per option */
.subtabs { display: flex; gap: 2px; margin-bottom: 8px; flex: none; }
.subtab { padding: 3px 14px; background: var(--face); cursor: pointer; border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); }
.subtab[aria-selected="true"] { font-weight: bold; border-color: var(--dark) var(--light) var(--light) var(--dark); background: #d8d8d8; }
.opt-pane[hidden] { display: none; }
details.folder { border: 2px groove var(--light); margin-bottom: 8px; padding: 0 8px 6px; }
details.folder > summary { cursor: pointer; font-weight: bold; padding: 4px 0; }
details.folder[hidden] { display: none; }
.opt { padding: 4px 0; border-top: 1px dotted var(--shadow); }
.opt[hidden] { display: none; }
.opt-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.opt-main label { flex-direction: row; font-weight: normal; }
.opt-main input[type=text] { width: 220px; }
.opt.changed .opt-main label { font-weight: bold; }
.opt.inactive { color: var(--shadow); }
.opt.inactive .note { color: var(--shadow); }
.opt.inactive input { opacity: .55; }
.tag { font-size: 11px; padding: 0 5px; border: 1px solid var(--shadow); background: var(--face); color: #404040; }
.tag.off { background: #e8e8e8; color: var(--shadow); border-style: dashed; }
.tag.chg { background: #ffffe1; color: var(--dark); border-color: var(--dark); }
.opt .desc { margin: 2px 0 0 0; max-width: 90ch; }
.opt input.bad { outline: 2px solid var(--bad); }
.opt-body mark, .opt mark { background: #ffee66; color: inherit; }

/* CL14: the map preview */
#map-preview { width: 100%; height: auto; display: block; margin: 6px 0; image-rendering: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 11px; margin-bottom: 4px; }
.legend span { display: inline-flex; align-items: center; gap: 3px; }
.legend i { width: 12px; height: 12px; border: 1px solid var(--dark); display: inline-block; }

/* CL14: starting zones - a 3 x 3 grid of boxes per team, the playlist */
.right-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.zone-grids { display: flex; flex-wrap: wrap; gap: 10px; }
.zone-team { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.zone-team .zname { font-weight: bold; border-left: 8px solid var(--shadow); padding-left: 4px; }
.zone-grid { display: grid; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(3, 24px); gap: 2px; }
.zone-grid button { padding: 0; font-size: 10px; background: var(--face); border: 2px solid; border-color: var(--light) var(--dark) var(--dark) var(--light); cursor: pointer; color: var(--dark); }
.zone-grid button.on { color: #fff; font-weight: bold; border-color: var(--dark) var(--light) var(--light) var(--dark); }
.zone-grid.off button { opacity: .45; cursor: default; }
.zone-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; }
.zone-mini { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.zone-mini .zone-grid { grid-template-columns: repeat(3, 20px); grid-template-rows: repeat(3, 16px); }
.zone-mini .zone-grid button { font-size: 8px; border-width: 1px; }
.playlist { margin: 0 0 8px; padding-left: 22px; max-height: 180px; overflow: auto; }
.playlist li { display: list-item; padding: 1px 0; }
.playlist li span.pl { display: inline-flex; gap: 4px; align-items: center; }

/* CL18/CL19: unit statistics folders */
#unit-stats-box { margin: 8px 0; }
.ustat { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; align-items: start; padding: 4px 0 8px; }
#unit-stats details.folder { margin: 4px 0 4px 12px; }
.runfile { margin-bottom: 8px; }
.ustat table { width: 100%; }
#crashes fieldset { margin: 8px 0; }

/* the report button flashes when a battle crashed (reduced motion: stays highlighted instead) */
@keyframes flash { 0%, 100% { background: var(--face); color: inherit; } 50% { background: var(--bad); color: #fff; } }
#report-btn.flash { animation: flash 1s steps(1, end) infinite; font-weight: bold; }
@media (prefers-reduced-motion: reduce) { #report-btn.flash { animation: none; background: var(--bad); color: #fff; } }