/* Tobruk — a survey sheet on a field table. */
:root{
  --paper:#e8d9b0; --board:#d9c799; --ink:#2f2618; --faint:#6b5a3c;
  --steel:#2c2a24; --steel2:#37342c; --brass:#b8912f; --rule:#4a463c;
  --axis:#5d6152; --allied:#8a6a3c; --alarm:#a63b28;
  --face:Georgia,'Times New Roman',serif;
  --mono:ui-monospace,Menlo,Consolas,'DejaVu Sans Mono',monospace;
  --cond:'DejaVu Sans Condensed','TeX Gyre Heros Cn','Liberation Sans Narrow',Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--steel);color:var(--paper);font-family:var(--face);overflow:hidden}
#app{display:flex;flex-direction:column;height:100%}
header{display:flex;align-items:baseline;gap:14px;padding:8px 14px;background:var(--steel2);
  border-bottom:2px solid var(--rule);flex:0 0 auto;flex-wrap:wrap}
header h1{font-family:var(--cond);font-size:19px;letter-spacing:.14em;text-transform:uppercase;
  margin:0;color:var(--brass)}
header h1 .version{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:#9a927e;
  text-transform:none;vertical-align:middle}
header .sub{font-size:11px;color:#9a927e;letter-spacing:.06em}
header .spacer{flex:1}
header span.stat{font-family:var(--mono);font-size:12px;color:#ded1b0}
#par{color:var(--brass)}
#main{display:flex;flex:1 1 auto;min-height:0}
#board{position:relative;flex:1 1 auto;min-width:0;overflow:hidden;background:var(--board)}
#sheet{position:absolute;left:0;top:0;touch-action:none;cursor:crosshair}
#tip{position:absolute;display:none;pointer-events:none;z-index:8;max-width:270px;
  background:rgba(28,25,19,0.96);border:1px solid var(--brass);border-radius:2px;
  padding:7px 9px;box-shadow:0 3px 10px rgba(0,0,0,0.45)}
.tip-head{font-family:var(--cond);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#f0e6cc;margin-bottom:1px}
.tip-head.own{color:#d8e2c9}.tip-head.foe{color:#e6c9a8}.tip-head.report{color:var(--alarm)}
.tip-sub{font-family:var(--mono);font-size:10px;color:#9a927e;margin-bottom:5px;
  border-bottom:1px dotted var(--rule);padding-bottom:4px}
.tip-row{display:flex;gap:8px;justify-content:space-between;font-family:var(--mono);font-size:10.5px;
  line-height:1.5}
.tip-row .tk{color:#9a927e;white-space:nowrap}
.tip-row .tv{color:#e8dcbe;text-align:right}
.tip-state{margin-top:5px;padding-top:4px;border-top:1px dotted var(--rule);
  font-family:var(--mono);font-size:10px;color:var(--alarm)}
.tip-note{margin-top:5px;font-size:11px;line-height:1.45;color:#a9a086;font-style:italic}
#info{flex:0 0 250px;background:var(--steel2);border-right:2px solid var(--rule);
  display:flex;flex-direction:column;min-height:0;overflow:auto}
#info section{border-bottom:1px solid var(--rule);padding:10px 11px}
#info h3,#side h3{font-family:var(--cond);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);margin:0 0 6px}
#mission{font-size:12px;line-height:1.5;color:#d8ccb0}
.objective{display:block;width:100%;padding:6px 7px;margin:0 0 5px;text-align:left;text-transform:none;
  letter-spacing:0;font-family:var(--face);font-size:12px;border-left:3px solid var(--rule)}
.objective.ours{border-left-color:var(--brass)}
.objective.theirs{border-left-color:var(--alarm)}
.objective.neutral{border-left-color:#8d8570}
.objective strong,.objective span{display:block}
.objective span{font-family:var(--mono);font-size:9.5px;color:#9a927e;margin-top:2px}
.force-row{display:grid;grid-template-columns:1fr auto;gap:3px 8px;font-family:var(--mono);
  font-size:10.5px;line-height:1.5}
.force-row .label{color:#9a927e}.force-row .value{color:#e8dcbe;text-align:right}
.camera-section{margin-top:auto}
.camera-controls{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:6px;margin-bottom:6px}
.camera-controls button{padding:7px 5px}
button.wide{width:100%;padding-left:5px;padding-right:5px}
.keynote{font-family:var(--mono);font-size:9px;line-height:1.45;color:#817966;margin:7px 0 0}
#side{flex:0 0 340px;background:var(--steel2);border-left:2px solid var(--rule);
  display:flex;flex-direction:column;min-height:0}
#side section{border-bottom:1px solid var(--rule);padding:9px 11px;min-height:0}
#selname{font-size:15px;color:#f0e6cc}
#seldetail{font-family:var(--mono);font-size:11px;color:#b3a888;margin-top:3px;line-height:1.5}
#rangecard{overflow:auto;max-height:46vh;scrollbar-width:thin}
.rc-head{display:flex;gap:7px;align-items:baseline;font-size:13px;margin-bottom:5px}
.rc-firer{color:#d8e2c9}.rc-target{color:#e6c9a8}.rc-arrow{color:var(--brass)}
.rc-gun{border-top:1px dotted var(--rule);padding-top:5px;margin-top:5px}
.rc-gunname{font-family:var(--cond);font-size:11px;letter-spacing:.08em;color:#cdbf9b}
.rc-no{font-family:var(--mono);font-size:11px;color:var(--alarm);margin-top:2px}
.rc-tbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px;margin-top:3px}
.rc-tbl td{padding:1px 0;vertical-align:top}
.rc-tbl td.k{color:#9a927e;width:37%}
.rc-tbl td.v{color:#f0e6cc;width:34%}
.rc-tbl td.n{color:#8d8570;width:29%;text-align:right;white-space:nowrap}
#roster{overflow:auto;flex:1 1 auto;min-height:60px}
.unit{display:flex;justify-content:space-between;gap:6px;font-size:12px;padding:2px 3px;
  border-radius:2px;cursor:pointer}
.unit:hover{background:rgba(184,145,47,0.14)}
.unit.on{background:rgba(184,145,47,0.26)}
.unit.dead{opacity:.4;text-decoration:line-through;cursor:default}
.unit .us{font-family:var(--mono);font-size:10px;color:#9a927e}
#ledger{overflow:auto;flex:1 1 auto;min-height:70px}
.slip{border-left:3px solid var(--rule);padding:2px 0 2px 6px;margin-bottom:3px}
.slip.ours{border-left-color:var(--brass)}
.slip.theirs{border-left-color:var(--alarm)}
.sl-head{display:block;font-size:11.5px;color:#e2d7ba}
.sl-det{display:block;font-family:var(--mono);font-size:10px;color:#968e78}
.muted{color:#8d8570;font-size:11.5px;margin:2px 0}
#acts{display:flex;gap:7px;padding:9px 11px;flex:0 0 auto;flex-wrap:wrap}
#acts button{flex:1 1 auto}
button{font-family:var(--cond);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 12px;border:1px solid var(--rule);background:#403c33;color:#e6dcc0;cursor:pointer;
  border-radius:2px}
button:hover:not(:disabled){background:#4d4839;border-color:var(--brass)}
button:disabled{opacity:.4;cursor:default}
button.primary{background:var(--brass);color:#241f13;border-color:#8f7024;font-weight:bold}
button.ghost{background:transparent}
#card{position:fixed;inset:0;background:rgba(20,18,14,0.88);display:none;align-items:center;
  justify-content:center;z-index:20;padding:16px}
#card-inner{background:var(--paper);color:var(--ink);max-width:660px;width:100%;max-height:92vh;
  overflow:auto;padding:20px 24px;border:2px solid #7a6642;border-radius:3px}
#card-title{font-family:var(--cond);letter-spacing:.2em;text-transform:uppercase;
  font-size:24px;margin:0 0 4px;color:#6b3a1c}
#card-body h3{font-family:var(--cond);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#7a6642;margin:14px 0 6px}
#card .lede{font-size:14px;line-height:1.55;margin:0 0 6px}
#card .rc-tbl td.k{color:#6b5a3c}#card .rc-tbl td.v{color:#2f2618}#card .rc-tbl td.n{color:#6b5a3c}
#card .muted{color:#6b5a3c}
.choices{display:flex;flex-direction:column;gap:6px}
.choices.row{flex-direction:row;flex-wrap:wrap}
.choice{text-align:left;background:#ded0a6;border:1px solid #a89267;color:var(--ink);
  padding:8px 10px;text-transform:none;letter-spacing:0;font-family:var(--face);font-size:13px}
.choice.small{flex:1 1 150px}
.choice.on{background:#c9b47f;border-color:#6b3a1c;box-shadow:inset 0 0 0 1px #6b3a1c}
.choice strong{display:block;font-size:14px}
.choice .when{display:block;font-family:var(--mono);font-size:10px;color:#6b5a3c;margin-top:1px}
.choice .blurb{display:block;font-size:12px;color:#4a3f28;margin-top:3px;line-height:1.45}
.acts{display:flex;gap:8px;margin-top:16px}
@media (max-width:880px){
  #main{flex-direction:column}
  #info{flex:0 0 auto;border-right:none;border-bottom:2px solid var(--rule);display:grid;
    grid-template-columns:1.2fr 1fr 1fr;max-height:31%;overflow:auto}
  #info section{border-bottom:none;border-right:1px solid var(--rule)}
  #info .camera-section{display:none}
  #side{flex:0 0 46%;border-left:none;border-top:2px solid var(--rule)}
  #board{flex:1 1 54%}
  header h1{font-size:16px}
  #rangecard{max-height:none}
}
@media (max-width:1120px) and (min-width:881px){
  #info{flex-basis:210px}#side{flex-basis:300px}
}