/* Afrika Korps. The board is printed; the panel is paperwork. */
:root {
  --sand: #d7c29a;
  --sand-deep: #bfa470;
  --sea: #31627f;
  --ink: #241e17;
  --ink-soft: #6a5e4c;
  --paper: #e9e2d0;
  --paper-line: #cabfa4;
  --carbon: #f4efe1;
  --stamp: #a6321e;
  --axis: #5c6b62;
  --allied: #b08442;
  --green: #2e6b4f;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --type: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
.gone { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
}

button, input { font: inherit; color: inherit; }
button {
  background: var(--paper);
  border: 1px solid var(--ink-soft);
  padding: 0.42em 0.9em;
  cursor: pointer;
}
button:hover:not(:disabled) { background: #f3ecda; }
button:disabled { opacity: 0.42; cursor: default; }
button.primary { background: var(--ink); color: var(--carbon); border-color: var(--ink); }
button.primary:hover:not(:disabled) { background: #3a3126; }
:focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; }

/* ------------------------------------------------------------- cover */
.cover {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100%;
  overflow: auto;
  color: #f6edda;
  background: #151614 url("../assets/cover-command-map.webp") center / cover no-repeat;
  isolation: isolate;
}
.cover.gone { display: none; }
.cover-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8,10,10,.97) 0%, rgba(14,15,14,.88) 28%, rgba(14,15,14,.22) 55%, rgba(14,15,14,.03) 76%),
    linear-gradient(0deg, rgba(11,12,11,.82) 0%, transparent 38%);
}
.cover-content {
  align-self: center;
  width: min(43rem, calc(100% - 3rem));
  margin: 3rem clamp(1.5rem, 7vw, 8rem);
  text-shadow: 0 2px 18px rgba(0,0,0,.62);
}
.cover-kicker {
  margin: 0 0 .55rem;
  color: #e5c88c;
  font-family: var(--type);
  font-size: clamp(.72rem, 1.1vw, .9rem);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.cover-years {
  display: flex;
  align-items: center;
  width: min(26rem, 82%);
  gap: .7rem;
  margin: 0 0 .75rem;
  color: rgba(229,200,140,.78);
  font-family: var(--type);
  font-size: .72rem;
  letter-spacing: .18em;
}
.cover-years i { height: 1px; flex: 1; background: rgba(229,200,140,.45); }
.cover h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4.4rem, 8.4vw, 8.4rem);
  font-weight: 400;
  line-height: .72;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.cover h1 span { display: block; }
.cover h1 span:last-child { margin-left: clamp(1rem, 4vw, 3.5rem); color: #e5c88c; }
.cover-subtitle {
  margin: 1.35rem 0 0;
  color: rgba(246,237,218,.86);
  font-family: var(--type);
  font-size: clamp(.78rem, 1.25vw, 1rem);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.cover-deck {
  max-width: 28rem;
  margin: .85rem 0 1.65rem;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.45;
}
.cover-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.cover-actions button {
  min-height: 3rem;
  padding: .65rem 1.25rem;
  border: 1px solid rgba(246,237,218,.68);
  color: #f6edda;
  background: rgba(20,22,20,.62);
  backdrop-filter: blur(5px);
  font-family: var(--type);
  letter-spacing: .035em;
}
.cover-actions button:hover:not(:disabled) { background: rgba(246,237,218,.17); }
.cover-actions .cover-primary {
  color: #201c15;
  background: #e5c88c;
  border-color: #e5c88c;
  font-weight: 700;
}
.cover-actions .cover-primary:hover:not(:disabled) { background: #f1dab0; }
.cover-brief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 38rem;
  margin-top: 1.8rem;
  border-top: 1px solid rgba(229,200,140,.35);
  border-bottom: 1px solid rgba(229,200,140,.2);
  background: rgba(14,15,14,.34);
}
.cover-brief div { padding: .7rem .85rem .75rem 0; }
.cover-brief div + div { padding-left: .85rem; border-left: 1px solid rgba(229,200,140,.2); }
.cover-brief b, .cover-brief span { display: block; }
.cover-brief b {
  margin-bottom: .14rem;
  color: #e5c88c;
  font-family: var(--type);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.cover-brief span { color: rgba(246,237,218,.76); font-family: var(--serif); font-size: .84rem; }
.cover-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem clamp(1.5rem, 4vw, 4rem);
  border-top: 1px solid rgba(246,237,218,.2);
  color: rgba(246,237,218,.74);
  background: rgba(15,17,16,.48);
  font-family: var(--type);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cover-version { color: #e5c88c; }
@media (max-width: 600px) {
  .cover-content { margin: 2rem 1.25rem; width: calc(100% - 2.5rem); }
  .cover h1 { font-size: clamp(3.6rem, 20vw, 5.3rem); }
  .cover-actions { flex-direction: column; align-items: stretch; }
  .cover-brief { grid-template-columns: 1fr; }
  .cover-brief div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(229,200,140,.16); }
  .cover-deck br { display: none; }
}

/* ------------------------------------------------------------- shell */
#app {
  display: grid;
  grid-template-columns: 26rem minmax(0, 1fr) 15rem;
  height: 100%;
}

#boardWrap {
  position: relative;
  overflow: hidden;
  background: var(--sea);
}
#board { display: block; touch-action: none; cursor: grab; }
#board:focus-visible { outline: 3px solid var(--stamp); outline-offset: -3px; }

/* read aloud, never drawn: the board is a canvas, so everything a screen
   reader is told about it has to be said in text somewhere */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
#board:active { cursor: grabbing; }

.map-tools { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.35rem; }
.map-tools button { flex: 1 1 auto; min-width: 2.4rem; }
#minimap {
  display: block;
  width: 100%;
  height: auto;
  margin: .55rem 0 .45rem;
  border: 1px solid var(--ink-soft);
  background: var(--sea);
  cursor: crosshair;
}
#minimap:hover { border-color: var(--stamp); }
.jump-label { display: block; margin: .55rem 0 .2rem; color: var(--ink-soft); font-size: .72rem; }
.jump-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem; }
.jump-row select {
  min-width: 0;
  width: 100%;
  padding: .4rem .35rem;
  border: 1px solid var(--ink-soft);
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-size: .78rem;
}
.tool-hint { margin: 0.3rem 0 0; font-size: 0.76rem; color: var(--ink-soft); }
#supplyToggle[aria-pressed="true"] {
  background: var(--green);
  color: var(--carbon);
  border-color: var(--green);
}

/* the hover readout: what is in the hex under the pointer */
#hover {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  max-width: 17rem;
  background: var(--carbon);
  border: 1px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(36, 30, 23, 0.25);
  padding: 0.4rem 0.55rem;
  font-size: 0.8rem;
  line-height: 1.35;
  opacity: 0;
  transition: opacity 90ms;
}
#hover.on { opacity: 1; }
#hover .hv-hex { font-family: var(--serif); font-size: 0.95rem; }
#hover .hv-ground { color: var(--ink-soft); font-size: 0.75rem; }
#hover .hv-unit {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  border-top: 1px solid var(--paper-line);
  padding-top: 0.15rem;
  margin-top: 0.15rem;
}
#hover .hv-f { font-family: var(--type); font-size: 0.74rem; }
#hover .hv-side { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
#hover .hv-axis { color: #3f4a43; }
#hover .hv-allied { color: #7a5a20; }
#hover .hv-warn { color: var(--stamp); font-size: 0.74rem; }
#hover .hv-move {
  margin-top: 0.25rem;
  padding-top: 0.2rem;
  border-top: 1px solid var(--paper-line);
  font-size: 0.76rem;
  color: #2f4f63;
}
#hover .hv-stop { color: #7a4a14; font-weight: 600; }

#note {
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%) translateY(0.5rem);
  background: var(--ink);
  color: var(--carbon);
  padding: 0.5em 1em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms, transform 160ms;
  max-width: 32rem;
}
#note.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ------------------------------------------------------------- panel */
#infoBar, #controlBar {
  background: var(--paper);
  overflow-y: auto;
  padding: 1rem 1.1rem 3rem;
}
#infoBar { border-right: 3px solid var(--ink); }
.bar-label {
  margin: 0 0 .5rem;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--paper-line);
  padding-bottom: .3rem;
}
.ver {
  font-family: var(--type);
  font-size: .55em;
  color: var(--ink-soft);
  letter-spacing: .02em;
  vertical-align: .25em;
}
#controlBar { border-left: 3px solid var(--ink); }
#infoBar h2 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0 0 0.1rem;
}
#infoBar h2 small {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}
#infoBar h3, #controlBar h3 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  margin: 0 0 0.3rem;
}
section { margin-top: 1.15rem; }

.track {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.16rem 0;
  border-bottom: 1px solid var(--paper-line);
}
.track-k { color: var(--ink-soft); }
.track-v { text-align: right; }

.objective-ladder {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .24rem;
}
.objective-ladder::before {
  content: '';
  position: absolute;
  left: .68rem;
  top: .72rem;
  bottom: .72rem;
  width: 1px;
  background: var(--paper-line);
}
.objective {
  position: relative;
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .45rem;
  width: 100%;
  padding: .38rem .42rem;
  text-align: left;
  background: rgba(255,255,255,.14);
}
.objective:hover:not(:disabled) { background: rgba(166,50,30,.06); }
.objective-marker {
  position: relative;
  z-index: 1;
  width: .72rem;
  height: .72rem;
  justify-self: center;
  border: 2px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--ink-soft);
  background: var(--ink-soft);
}
.objective-axis .objective-marker { background: var(--axis); }
.objective-allied .objective-marker { background: var(--allied); }
.objective-name, .objective-effect { display: block; }
.objective-name { font-family: var(--serif); font-size: .85rem; }
.objective-effect { margin-top: .04rem; color: var(--ink-soft); font-size: .61rem; }
.objective-holder {
  font-family: var(--type);
  font-size: .6rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.objective-axis .objective-holder { color: #5f6d2e; }
.objective-allied .objective-holder { color: #805832; }

.forecast-window { margin: -.12rem 0 .45rem; color: var(--ink-soft); font-family: var(--type); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.forecast-side + .forecast-side { margin-top: .65rem; }
.forecast-head {
  display: flex;
  align-items: center;
  gap: .38rem;
  margin-bottom: .2rem;
  color: var(--ink-soft);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.forecast-dot { width: .55rem; height: .55rem; border: 1px solid rgba(36,30,23,.4); border-radius: 50%; background: var(--axis); }
.forecast-allied .forecast-dot { background: var(--allied); }
.forecast-row {
  display: grid;
  grid-template-columns: 4.65rem minmax(0, 1fr) auto;
  gap: .4rem;
  align-items: baseline;
  padding: .22rem 0;
  border-bottom: 1px solid var(--paper-line);
  font-size: .72rem;
}
.forecast-date { color: var(--ink-soft); font-family: var(--type); font-size: .61rem; }
.forecast-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forecast-factors { color: var(--ink-soft); font-family: var(--type); font-size: .63rem; }
.forecast-empty { margin: .15rem 0 0; color: var(--ink-soft); font-size: .7rem; font-style: italic; }
.forecast-later { margin: .28rem 0 0; color: var(--ink-soft); font-size: .64rem; }

.report {
  border-left: 3px solid var(--stamp);
  background: rgba(166, 50, 30, 0.06);
  padding: 0.45rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.rep-line { margin: 0; font-size: 0.8rem; }
.rep-fight { font-family: var(--type); font-size: 0.74rem; }
.rep-loss { margin: 0.15rem 0 0; font-size: 0.79rem; color: var(--stamp); }
.rep-gain { margin: 0.15rem 0 0; font-size: 0.79rem; color: var(--green); }
#report.gone { display: none; }

.standing {
  margin-top: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-left: 3px solid var(--ink-soft);
  background: rgba(36, 30, 23, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.standing-axis { border-left-color: var(--axis); }
.standing-allied { border-left-color: var(--allied); }
.standing-draw { border-left-color: var(--ink-soft); }
.standing-head {
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.standing-verdict { font-family: var(--serif); font-size: 1.02rem; }
.standing-why { font-size: 0.78rem; color: var(--ink-soft); }
.standing-turns { font-size: 0.74rem; color: var(--ink-soft); }

.unit-line, .unit-factors, .unit-mp { margin: 0.15rem 0; }
.unit-factors { font-family: var(--type); font-size: 0.85rem; }
.unit-mp { color: var(--ink-soft); font-size: 0.88rem; }

.trace {
  margin-top: 0.55rem;
  padding: 0.5rem 0.65rem;
  border-left: 3px solid var(--green);
  background: rgba(46, 107, 79, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.87rem;
}
.trace-bad { border-left-color: var(--stamp); background: rgba(166, 50, 30, 0.08); }
.trace-head { font-weight: 600; }
.trace-path { font-family: var(--type); font-size: 0.76rem; color: var(--ink-soft); }
.trace-warn { color: var(--stamp); }

/* --------------------------------------------------- the supply slip */
#slipBox {
  background: var(--carbon);
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(36, 30, 23, 0.16);
  padding: 0.8rem 0.9rem 1rem;
  font-family: var(--type);
  font-size: 0.83rem;
}
.slip-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem 0.6rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.35rem;
  margin-bottom: 0.55rem;
}
.slip-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.slip-when { text-align: right; color: var(--ink-soft); }
.slip-where { grid-column: 1 / -1; font-weight: 600; }
.slip-empty { margin: 0; color: var(--ink-soft); font-family: var(--sans); }
.slip-refuse { margin: 0; color: var(--stamp); }

.ledger { width: 100%; border-collapse: collapse; }
.ledger td { padding: 0.12rem 0; vertical-align: baseline; }
.lg-what { width: 55%; }
.lg-note { color: var(--ink-soft); font-size: 0.74rem; padding-left: 0.4rem; }
.lg-num { text-align: right; width: 3.2rem; font-variant-numeric: tabular-nums; }
.ledger-sum td { border-top: 1px solid var(--paper-line); font-weight: 700; }
.ledger-gap td { height: 0.55rem; }
.ledger-mult .lg-what { padding-left: 0.9rem; color: var(--ink-soft); }

.odds {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  border-top: 2px solid var(--ink);
}
.odds-figures { font-variant-numeric: tabular-nums; }
.odds-col {
  font-family: var(--serif);
  font-size: 1.5rem;
  border: 2px solid var(--ink);
  padding: 0.05em 0.4em;
}
.odds-rule {
  margin: 0.3rem 0 0;
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.slip-flag { margin: 0.35rem 0 0; font-weight: 700; }

.slip-supply {
  margin-top: 0.6rem;
  padding: 0.45rem 0.6rem;
  border: 1px dashed var(--ink-soft);
  font-size: 0.79rem;
}
.slip-supply.good { border-color: var(--green); color: var(--green); }
.slip-supply.bad { border-color: var(--stamp); color: var(--stamp); }

.stamp {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--paper-line);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.die {
  width: 3rem;
  height: 3rem;
  flex: none;
  border: 2px solid var(--stamp);
  border-radius: 6px;
  transform: rotate(-4deg);
  display: grid;
  place-items: center;
}
.die-none {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--stamp);
}
.pips { width: 100%; height: 100%; fill: var(--stamp); }
.stamp-text { display: flex; flex-direction: column; gap: 0.1rem; }
.stamp-text strong {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--stamp);
}
.stamp-text span { font-size: 0.78rem; }

/* ------------------------------------------------------------ sundry */
#slots { display: flex; flex-direction: column; gap: 0.25rem; }
.slot { display: grid; grid-template-columns: 1fr auto auto auto; gap: 0.25rem; align-items: center; }
.slot-what { font-size: 0.73rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot button { padding: 0.15em 0.45em; font-size: 0.76rem; }
.slot .slot-delete { color: var(--stamp); }
#setupSlots { margin-top: 1rem; }
#setupSlots .slot { grid-template-columns: 1fr auto auto; margin-bottom: 0.2rem; }
#setupSlots .slot-what { font-size: 0.85rem; color: var(--ink); }
.campaign-file-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; margin-top: .55rem; }

#pool { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; }
#pool .buy { font-size: 0.85rem; }

#controls { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
#controls button { flex: 1 1 100%; }
.phase-rail { margin: 0 0 .75rem; }
.phase-progress-head { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; color: var(--ink-soft); font-family: var(--type); font-size: .65rem; text-transform: uppercase; }
.phase-progress { height: 4px; margin-bottom: .65rem; overflow: hidden; background: var(--paper-line); }
.phase-progress span { display: block; height: 100%; background: var(--stamp); }
.phase-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; }
.phase-steps li { min-width: 0; padding: .38rem .2rem; color: var(--ink-soft); background: rgba(36,30,23,.055); text-align: center; }
.phase-steps b, .phase-steps span { display: block; }
.phase-steps b { font-family: var(--type); font-size: .58rem; font-weight: 400; }
.phase-steps span { overflow: hidden; font-size: .63rem; text-overflow: ellipsis; text-transform: uppercase; }
.phase-steps .done { color: var(--green); background: rgba(46,107,79,.1); }
.phase-steps .current { color: var(--carbon); background: var(--stamp); }
.phase-opponent { margin: .4rem 0 .7rem; padding: .5rem; border-left: 3px solid var(--stamp); background: rgba(166,50,30,.08); color: var(--ink-soft); font-size: .75rem; }
.ctl-row { flex: 1 0 100%; }
.expend-lab { display: flex; gap: 0.4rem; align-items: center; font-size: 0.86rem; }
.hint { flex: 1 0 100%; margin: 0; color: var(--ink-soft); }
.over {
  flex: 1 0 100%;
  margin: 0 0 0.4rem;
  font-family: var(--serif);
  font-size: 1.1rem;
}

#log { max-height: 12rem; overflow-y: auto; border-top: 1px solid var(--paper-line); padding-top: 0.4rem; }
.log-line { margin: 0 0 0.18rem; font-size: 0.8rem; color: var(--ink-soft); }
.log-line:first-child { color: var(--ink); }

/* ------------------------------------------------------ setup / help */
/* The opening sheet covers the MAP, not the window. It used to blanket
   everything at 86% opacity, which left both sidebars sitting in the dark
   behind it: the first thing anybody saw on opening the game was a dialog on
   a black field, and the columns might as well not have been there. */
.sheet {
  position: absolute;
  inset: 0;
  background: rgba(36, 30, 23, 0.55);
  display: grid;
  place-items: center;
  padding: 1.2rem;
  z-index: 20;
  overflow-y: auto;
}
.sheet.gone { display: none; }
.sheet-inner {
  background: var(--paper);
  max-width: 40rem;
  width: 100%;
  min-width: 0;
  padding: 1.4rem 1.5rem 1.6rem;
  border-top: 6px solid var(--stamp);
  box-shadow: 0 6px 28px rgba(36, 30, 23, 0.35);
}
@media (max-width: 1150px) {
  .sheet-inner { padding: 1rem 1.1rem 1.2rem; font-size: 14px; }
  .sheet-inner h1 { font-size: 1.5rem; }
}
.sheet-inner h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2rem;
  margin: 0;
}
.sheet-inner .standfirst { margin: 0.2rem 0 1.1rem; color: var(--ink-soft); }
.sheet-inner h2 { font-family: var(--serif); font-weight: 400; font-size: 1.1rem; margin: 1.2rem 0 0.3rem; }
.sheet-inner p, .sheet-inner li { max-width: 62ch; }
.sheet-inner ul { padding-left: 1.1rem; margin: 0.2rem 0; }

/* The campaign setup is an operations brief, not a tax form. */
#setup { background: rgba(25, 24, 20, .72); }
#setup .setup-inner { max-width: 66rem; padding: 0; border-top: 0; overflow: hidden; }
.briefing-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 1.1rem;
  color: var(--carbon);
  background: var(--ink);
  border-bottom: 4px solid var(--stamp);
}
.briefing-head h1 { font-size: 2.15rem; }
.briefing-head .standfirst { margin-bottom: 0; color: rgba(244,239,225,.68); }
.briefing-label {
  margin: 0 0 .25rem;
  color: var(--sand-deep);
  font-family: var(--type);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.briefing-back { color: var(--carbon); border-color: rgba(244,239,225,.34); background: transparent; }
.briefing-back:hover:not(:disabled) { background: rgba(244,239,225,.1); }
.briefing-grid { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; }
.briefing-main { min-width: 0; padding: 1.2rem 1.5rem 1.4rem; }
.briefing-section + .briefing-section { margin-top: 1rem; }
.briefing-section h2 {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .55rem;
  font-size: .95rem;
}
.briefing-section h2 span {
  display: inline-grid;
  place-items: center;
  width: 1.65rem;
  height: 1.65rem;
  color: var(--carbon);
  background: var(--stamp);
  font-family: var(--type);
  font-size: .64rem;
}
.command-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.command-card {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: .7rem;
  min-height: 7.8rem;
  padding: .85rem;
  text-align: left;
  background: #f4efdf;
  border: 1px solid var(--paper-line);
  box-shadow: 0 2px 0 rgba(36,30,23,.11);
}
.command-card:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-1px); }
.command-mark {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--carbon);
  background: var(--axis);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.25rem;
}
.allied-card .command-mark { color: var(--ink); background: var(--allied); }
.command-copy b, .command-copy small { display: block; }
.command-copy b { font-family: var(--serif); font-size: 1.05rem; }
.command-copy small { margin-top: .25rem; color: var(--ink-soft); line-height: 1.35; }
.command-go { grid-column: 2; color: var(--stamp); font-family: var(--type); font-size: .69rem; text-transform: uppercase; }
.difficulty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.difficulty-grid label { position: relative; cursor: pointer; }
.difficulty-grid input { position: absolute; opacity: 0; }
.difficulty-grid label > span {
  display: block;
  padding: .55rem .65rem;
  border: 1px solid var(--paper-line);
  background: rgba(255,255,255,.28);
}
.difficulty-grid b, .difficulty-grid small { display: block; }
.difficulty-grid small { color: var(--ink-soft); font-size: .7rem; }
.difficulty-grid input:checked + span { border-color: var(--stamp); box-shadow: inset 4px 0 var(--stamp); background: #f7f0dd; }
.difficulty-grid input:focus-visible + span { outline: 2px solid var(--stamp); outline-offset: 2px; }
.seed-row { display: flex; gap: .5rem; }
.seed-row input { min-width: 0; flex: 1; padding: .45rem .55rem; border: 1px solid var(--paper-line); background: #fffdf5; font-family: var(--type); }
.resume-briefing { width: 100%; margin-top: 1rem; border-color: var(--green); color: var(--carbon); background: var(--green); }
.setup-slots { margin-top: .8rem; }
.setup-slots h2 { margin: .6rem 0 .35rem; }
.setup-slots .slot { display: grid; grid-template-columns: 1fr auto; gap: .4rem; align-items: center; }
.orders-card { padding: 1.25rem; color: var(--carbon); background: #34352f; }
.orders-card h2 { margin: .2rem 0 1rem; color: #f2dfb7; font-size: 1.3rem; line-height: 1.25; }
.orders-card dl { margin: 0; }
.orders-card dl div { padding: .65rem 0; border-top: 1px solid rgba(244,239,225,.15); }
.orders-card dt { color: var(--sand-deep); font-family: var(--type); font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; }
.orders-card dd { margin: .18rem 0 0; color: rgba(244,239,225,.78); font-size: .8rem; line-height: 1.4; }
.orders-foot { margin: 1rem 0 0; color: rgba(244,239,225,.48); font-family: var(--type); font-size: .64rem; text-transform: uppercase; }
@media (max-width: 850px) {
  .briefing-grid { grid-template-columns: 1fr; }
  .orders-card { display: none; }
}
@media (max-width: 560px) {
  #setup { padding: .5rem; place-items: start center; }
  .briefing-head, .briefing-main { padding: .9rem; }
  .briefing-head { align-items: center; }
  .briefing-head .standfirst { display: none; }
  .command-grid, .difficulty-grid { grid-template-columns: 1fr; }
  .command-card { min-height: 0; }
}
/* the printed tables, in the rules sheet */
/* the combat table is thirteen columns wide and the sheet is not: it scrolls
   sideways inside its own box rather than pushing the sheet past the window */
/* A grid item's min-width defaults to min-content, so a wide table inside an
   overflow box still pushes its container past the window. These have to be
   told they may be narrower than what is in them. */
#crtTable, #convoyTable, #terrainTable {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}
.ref { border-collapse: collapse; margin: .4rem 0 .2rem; font-size: .8rem; }
.ref th, .ref td { border: 1px solid var(--paper-line); padding: .16rem .38rem; text-align: center; }
.ref th { background: rgba(36,30,23,.06); font-weight: 600; }
.ref thead th { position: relative; }
.ref .die { background: rgba(36,30,23,.06); font-weight: 600; }
.ref .c-AE, .ref .c-AD { color: #8a2b18; }
.ref .c-AR { color: #a2551f; }
.ref .c-EX { color: var(--ink-soft); }
.ref .c-DR { color: #2f5f7a; }
.ref .c-DE, .ref .c-AV { color: var(--green); font-weight: 600; }
.ref .live { background: rgba(166,50,30,.16); }
.ref-wide { min-width: 30rem; }
.ref-left th, .ref-left td { text-align: left; }
.table-note { font-size: .8rem; color: var(--ink-soft); margin: .2rem 0 .4rem; }
.key { display: flex; flex-wrap: wrap; gap: .15rem .9rem; font-size: .78rem; margin: .3rem 0 0; }
.key span b { font-family: var(--type); }

fieldset { border: 1px solid var(--paper-line); padding: 0.6rem 0.8rem; margin: 0 0 0.9rem; }
legend { padding: 0 0.35em; color: var(--ink-soft); font-size: 0.85rem; }
.choices { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.choices label { display: flex; gap: 0.35rem; align-items: center; }
.start-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .die { transform: none; }
}

#legend { display: flex; flex-direction: column; gap: 0.22rem; margin-top: 0.4rem; }
.lg-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; }
.lg-swatch { width: 1.1rem; height: 1.1rem; flex: none; border: 1px solid var(--ink-soft); }
.lg-head { margin: 0.5rem 0 0.1rem; font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft); }

/* The two columns stay COLUMNS as far down as they possibly can: they narrow,
   then their type shrinks, and only when there is genuinely no room left do
   they go under the map. An earlier version gave up at 1180px, which meant
   anything less than a full-width desktop window - an embedded viewer, a
   half-screen window, a tablet - lost the sidebars entirely and looked like a
   different program. */
@media (max-width: 1400px) {
  #app { grid-template-columns: 22rem minmax(0, 1fr) 13rem; }
}
@media (max-width: 1150px) {
  #app { grid-template-columns: 18rem minmax(0, 1fr) 11.5rem; }
  #infoBar, #controlBar { padding: .8rem .75rem 2rem; font-size: 14px; }
  #infoBar h2 { font-size: 1.15rem; }
  #slipBox { padding: .6rem .65rem .8rem; font-size: .78rem; }
  .odds-col { font-size: 1.25rem; }
}
@media (max-width: 900px) {
  #app { grid-template-columns: 15rem minmax(0, 1fr) 10rem; }
  #infoBar, #controlBar { font-size: 13px; padding: .7rem .6rem 2rem; }
  #log { max-height: 8rem; }
}

/* only now does the map take the whole width and the columns drop beneath it */
@media (max-width: 760px) {
  #app {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(0, 15rem);
    grid-template-areas: 'board board' 'info controls';
  }
  #boardWrap { grid-area: board; }
  #infoBar { grid-area: info; border-right: none; border-top: 3px solid var(--ink); }
  #controlBar { grid-area: controls; border-left: 3px solid var(--ink); border-top: 3px solid var(--ink); }
  #infoBar, #controlBar { padding-bottom: 1.5rem; }
}
@media (max-width: 520px) {
  #app {
    grid-template-columns: 1fr;
    /* the map keeps at least half the screen; the two columns scroll below it */
    grid-template-rows: minmax(48vh, 1fr) minmax(0, auto) minmax(0, 14rem);
    grid-template-areas: 'board' 'controls' 'info';
  }
  #controlBar { border-left: none; }
  #hover { display: none; }
}