/* The original was a black-and-white Mac game with engraved-looking panels, so this
   leans on paper tones and a serif face rather than trying to look modern. */
:root {
  --ink: #241f1a;
  --ink-soft: #5d554b;
  --paper: #f4f0e6;
  --panel: #fbf8f1;
  --rule: #cbc0ac;
  --warn: #9a3412;
  --good: #3f6b34;
  --accent: #7a5c2e;
  --side: 38rem;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.45 Georgia, "Iowan Old Style", serif;
}

header {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 0.6rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
  flex: none;
}

h1 { font-size: 1.05rem; margin: 0; font-weight: 600; letter-spacing: 0.02em; }
h1 span { display: block; font-size: 0.8rem; color: var(--ink-soft); font-weight: 400; font-style: italic; }

.turn { font-size: 1rem; font-weight: 600; letter-spacing: 0.03em; }

.phases { display: flex; gap: 0.35rem; flex: none; }
.phases span {
  padding: 0.24rem 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: #fff;
}
.phases span.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.phases span.done { color: var(--accent); }

.standing { margin-left: auto; font-size: 0.82rem; color: var(--ink-soft); }
.standing b { color: var(--ink); }

/* The map takes whatever is left after the side column, and the whole app is sized to
   the viewport so the footer never drops below the fold. */
main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side);
  gap: 0.7rem;
  padding: 0.7rem 1.1rem;
  align-items: stretch;
}

.pane { background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; }

.map-pane { padding: 0.4rem; display: flex; flex-direction: column; min-height: 0; }
.map-tools { display: flex; align-items: center; gap: 0.3rem; padding: 0 0.2rem 0.35rem; flex: none; }
.map-tools button { padding: 0.1rem 0.5rem; font-size: 0.85rem; min-width: 2rem; }

#map { flex: 1; min-height: 0; display: flex; overflow: hidden; }
svg.map { width: 100%; height: 100%; display: block; cursor: grab; }
svg.map.panning { cursor: grabbing; }

.side { display: flex; flex-direction: column; gap: 0.7rem; min-height: 0; overflow-y: auto; }
.side > .pane { padding: 0.7rem 0.85rem; }
#panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#nations { flex: none; }

/* Expanded: the production table gets the whole window and the map steps aside. It is
   the screen with the most numbers on it and the one the player spends longest in. */
body.expanded main { grid-template-columns: minmax(0, 1fr); }
body.expanded .map-pane { display: none; }
body.expanded #nations { display: none; }

/* Expanded, the side column becomes the whole window: production takes what is left
   after the inspector, and the inspector only takes a column when it has something in
   it. Reading a factory's recipe while setting its workers is the point. */
body.expanded .side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: stretch;
  overflow: hidden;
}
body.expanded #panel { grid-row: 1; grid-column: 1; min-height: 0; overflow-y: auto; }
body.expanded #inspector { display: none; }
body.expanded.inspecting .side { grid-template-columns: minmax(0, 1fr) 26rem; }
body.expanded.inspecting #inspector {
  display: block;
  grid-row: 1;
  grid-column: 2;
  min-height: 0;
  overflow-y: auto;
}
body.expanded table { font-size: 0.95rem; }
body.expanded td { padding: 0.2rem 0.4rem; }
body.expanded input[type="number"] { width: 5rem; font-size: 0.95rem; }

svg.map .label { font-family: Georgia, serif; font-size: 9.5px; fill: #241f1a; pointer-events: none; }
svg.map .fp { font-family: Georgia, serif; font-size: 9px; font-weight: bold; fill: #7a2d16; pointer-events: none; }
svg.map .province { cursor: pointer; }

/* Drawn over the borders, so these can afford to be quieter than they once were. */
svg.map .highlight.selected { stroke: #b4531a; stroke-width: 5; }
svg.map .highlight.target-road { stroke: #1d5e18; stroke-width: 4; }
svg.map .highlight.target-rough { stroke: #1d5e18; stroke-width: 4; stroke-dasharray: 9 6; }
svg.map .highlight.inspected { stroke: #1b4f78; stroke-width: 4; stroke-dasharray: 3 3; }
svg.map .highlight.held { stroke: #fff; stroke-width: 3.2; stroke-linejoin: round; }

svg.map .march { stroke-width: 3.2; }
svg.map .march.hostile { stroke: #9a2212; }
svg.map .march.friendly { stroke: #1d5e18; stroke-dasharray: 6 4; }
svg.map .march-head.hostile { fill: #9a2212; }
svg.map .march-head.friendly { fill: #1d5e18; }

svg.map .in-transit { stroke: #fff; stroke-width: 1.6; }
svg.map .in-transit.hostile { fill: #9a2212; }
svg.map .in-transit.friendly { fill: #1d5e18; }
svg.map .in-transit-label { font: bold 8px Georgia, serif; fill: #fff; }

.hint { margin: 0; font-size: 0.78rem; color: var(--ink-soft); }

h2 { font-size: 0.9rem; margin: 0 0 0.5rem; text-transform: uppercase; letter-spacing: 0.06em; }
h2 small { text-transform: none; letter-spacing: 0; color: var(--ink-soft); font-weight: 400; }
h2 .right { float: right; text-transform: none; letter-spacing: 0; }

table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
th {
  text-align: right;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 0 0.25rem 0.3rem;
  font-size: 0.74rem;
  white-space: nowrap;
}
th:first-child, th.name { text-align: left; }
th.lock, td.lock { text-align: center; }
td { padding: 0.12rem 0.25rem; text-align: right; border-top: 1px solid #ece5d6; white-space: nowrap; }
/* The one cell that is a sentence rather than a number; left to wrap it would otherwise
   set the table's minimum width all by itself. */
td.wrap { white-space: normal; text-align: left; line-height: 1.35; padding-top: 0.3rem; }
td:first-child, td.name { text-align: left; }
tr.idle td { color: #a49a88; }
tr.limited td.lim { color: var(--warn); }
.short { color: var(--warn); }
.spare { color: var(--ink-soft); }

/* Fine control matters more than compactness here: a drag across a short slider moves
   several workers at a time, so the number box is the precise instrument and the slider
   is the coarse one. */
/* The number box is the precise control and the slider the coarse one, so when the pane
   is narrow the slider is what gives way — it is the one that needs width to be useful. */
td.slider, th.slider { width: auto; min-width: 3.5rem; }
body:not(.expanded) td.slider, body:not(.expanded) th.slider,
body:not(.expanded) col.c-slider { display: none; }

/* Column widths are declared rather than inferred from content. Left to itself the
   browser spread the numeric columns across the whole width when expanded, and shifted
   the factory names every time a lock redrew the table. The slider column takes the
   slack, so the numbers stay together on the left however wide the pane gets. */
table.production, table.orders { table-layout: fixed; }
col.c-name { width: 8.5rem; }
col.c-num { width: 3.6rem; }
col.c-short { width: 6.5rem; }
col.c-order { width: 10rem; }
col.c-tune { width: 8.4rem; }
col.c-lock { width: 2rem; }
col.c-slider { width: auto; }
body:not(.expanded) col.c-name { width: 7.5rem; }
td.name { overflow: hidden; text-overflow: ellipsis; }
input[type="range"] { width: 100%; margin: 0; accent-color: var(--accent); vertical-align: middle; }
input[type="number"] {
  width: 3.6rem;
  font: inherit;
  font-size: 0.82rem;
  text-align: right;
  padding: 0.05rem 0.2rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
}
input[type="number"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input:disabled { opacity: 0.45; }
td.nudge { width: 1.4rem; padding: 0 0.05rem; }
td.nudge button { padding: 0 0.3rem; font-size: 0.8rem; line-height: 1.3; min-width: 1.3rem; }
td.lock { width: 1.6rem; text-align: center; }

.totals { margin-top: 0.6rem; font-size: 0.82rem; line-height: 1.6; }
.totals .growing { color: var(--good); }
.totals .starving { color: var(--warn); font-weight: bold; }
.preview { color: var(--accent); font-style: italic; }

.controls { display: flex; gap: 0.4rem; margin: 0.6rem 0 0.2rem; flex-wrap: wrap; }

button {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.28rem 0.7rem;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
}
button:hover { background: #f6efdf; }
button:disabled { opacity: 0.5; cursor: default; }
button.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
button.primary:hover { background: #3b332a; }

footer {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 1.1rem;
  border-top: 1px solid var(--rule);
  background: var(--panel);
  flex: none;
}
footer button { font-size: 0.9rem; padding: 0.35rem 1.1rem; }
.notice { font-size: 0.82rem; color: var(--accent); }

ul.log { margin: 0.2rem 0 0; padding-left: 1.1rem; font-size: 0.82rem; }
ul.log li { margin-bottom: 0.2rem; }
ul.log li.taken { color: var(--warn); }
ul.log li.now { font-weight: bold; }

/* The nation list, and the inspector that opens from it or from the map. */
ul.nations { list-style: none; margin: 0; padding: 0; font-size: 0.82rem; }
ul.nations li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.18rem 0.3rem;
  border-top: 1px solid #ece5d6;
  cursor: pointer;
}
ul.nations li:hover { background: #f6efdf; }
ul.nations li.you { font-weight: bold; }
ul.nations li.open { background: #efe6d2; }
ul.nations .swatch { width: 0.8rem; height: 0.8rem; border: 1px solid var(--ink); flex: none; }
ul.nations .num { margin-left: auto; color: var(--ink-soft); font-weight: normal; }

.inspect dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.6rem; font-size: 0.82rem; }
.inspect dt { color: var(--ink-soft); }
.inspect dd { margin: 0; text-align: right; }
.inspect .secret { color: var(--ink-soft); font-style: italic; }

/* Start screen and the conquest splash. Both sit over the board rather than replacing
   it, so the map is still there behind the announcement. */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(36, 31, 26, 0.55);
}
.overlay[hidden] { display: none; }
.overlay .card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(36, 31, 26, 0.35);
  padding: 1.6rem 1.9rem;
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.overlay h1 { font-size: 1.3rem; margin: 0 0 0.3rem; }
.overlay h1 span { font-size: 0.9rem; }
.overlay .blurb { margin: 0 0 0.7rem; font-size: 0.86rem; color: var(--ink-soft); }
.overlay label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.overlay input[type="text"], .overlay select {
  font: inherit;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  margin-bottom: 0.45rem;
}
.overlay .hint { margin: -0.3rem 0 0.6rem; }
.overlay button { padding: 0.45rem 1.1rem; font-size: 0.95rem; }
.overlay .controls { margin-top: 0.9rem; }
#splash .card { text-align: center; }
#splash .controls { justify-content: center; }
#splash dl.rank { text-align: left; margin-top: 0.4rem; }

dl.rank { margin: 0; font-size: 0.85rem; }
dl.rank div { display: flex; gap: 0.5rem; padding: 0.2rem 0; border-top: 1px solid #ece5d6; }
dl.rank dt { width: 9rem; }
dl.rank dd { margin: 0; color: var(--ink-soft); }
dl.rank div.you dt { font-weight: bold; }
dl.rank div { cursor: pointer; }
dl.rank div:hover { background: #f6efdf; }
dl.rank div.open { background: #efe6d2; }

/* The nudge buttons belong against the box they nudge, not spread across the row. */
td.tune { white-space: nowrap; text-align: right; width: 1%; padding-right: 0.6rem; }
td.tune input[type="number"] { margin: 0 0.15rem; }
td.tune button { padding: 0 0.35rem; font-size: 0.8rem; line-height: 1.35; min-width: 1.4rem; }

tr.idle-row td { color: var(--accent); font-style: italic; border-top: 1px solid var(--rule); }

/* A factory that cannot meet the demand on it is the thing a player most needs to spot,
   so it gets a band and a marked edge rather than one red number. */
tr.deficit td { background: #f7e7e0; }
tr.deficit td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
tr.deficit td.lim, tr.deficit .short { color: var(--warn); font-weight: bold; }
tr.idle.deficit td { color: var(--ink-soft); }
tr.total td { border-top: 1px solid var(--rule); }
.capacity { color: var(--ink-soft); }

/* Exit sits at the far right of the footer, as far from the button pressed every turn
   as the bar allows. The game autosaves, so leaving costs nothing. */
.quit { margin-left: auto; }

/* The march control rides on the map beside the province it is ordering, so the number
   being set is next to the thing being ordered rather than in a table across the page. */
.map-pane { position: relative; }
.march-control {
  position: absolute;
  z-index: 5;
  right: 0.7rem;
  bottom: 0.7rem;
  background: var(--panel);
  border: 1px solid var(--ink);
  border-radius: 3px;
  box-shadow: 0 3px 12px rgba(36, 31, 26, 0.3);
  padding: 0.3rem 0.45rem;
  font-size: 0.8rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.march-control[hidden] { display: none; }
.march-control b { color: var(--warn); }
.march-control { flex-direction: column; align-items: stretch; gap: 0.2rem; }
.march-control .row { display: flex; align-items: center; gap: 0.5rem; }
/* The slider takes the slack, as the factory one does: precision here is width. */
.march-control input[type="range"] { flex: 1 1 18rem; min-width: 12rem; }
.march-control input[type="number"] { width: 3.6rem; }
.march-control button { padding: 0 0.35rem; min-width: 1.4rem; }
.march-control .stays, .march-control .moving { flex: none; color: var(--ink-soft); }
.march-control .stays { min-width: 5rem; text-align: right; }
.march-control .dismiss { font-size: 1rem; line-height: 1; padding: 0 0.4rem; }

/* Affinity, in the nation inspector. */
h3 { font-size: 0.78rem; margin: 0.8rem 0 0.35rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
table.affinity { table-layout: auto; font-size: 0.8rem; }
table.affinity td.name, table.affinity th.name { text-align: left; }
table.affinity .swatch { display: inline-block; width: 0.7rem; height: 0.7rem; border: 1px solid var(--ink); vertical-align: -1px; margin-right: 0.2rem; }
table.affinity .warm { color: var(--good); }
table.affinity .cool { color: var(--warn); }

/* A factory name is a way into its recipe, so it reads as one without becoming a
   button-shaped thing in every row. */
button.link {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline dotted var(--rule);
  text-underline-offset: 2px;
}
button.link:hover { background: none; color: var(--accent); text-decoration-color: var(--accent); }
tr.idle button.link { color: inherit; }

/* This turn's movement, beside the figure it explains. Population is the score, so a
   gain and a loss have to be told apart at a glance and not merely read. */
.delta { font-size: 0.82em; font-weight: 600; }
.delta.up { color: var(--good); }
.delta.down { color: var(--warn); }

/* The union phase (§6.1). Offers read as a short list of deals on the table. */
.offer { padding: 0.4rem 0; border-bottom: 1px solid var(--rule); }
.offer.chosen { background: #eef3ea; box-shadow: inset 3px 0 0 var(--good); padding-left: 0.5rem; }
.offer dt { font-weight: 600; }
.offer dd { margin: 0.15rem 0 0; }
.declare { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.warn-line { color: var(--warn); font-weight: 600; }
/* Somebody else is allocating your economy this turn, so say so before they scroll. */
.union-line {
  background: #f3efe2;
  border-left: 3px solid var(--accent);
  padding: 0.4rem 0.6rem;
  margin: 0.4rem 0;
}
table.read-only { opacity: 0.75; }

/* A union has three roles and the map says which is which: the leader whose economy it
   is, the members who handed theirs over, and the one nation they may all attack. */
svg.map .highlight.leader,
svg.map .highlight.member,
svg.map .highlight.foe,
svg.map .highlight.held {
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
svg.map .highlight.leader { stroke: #fff; }
svg.map .highlight.member { stroke: #e0b500; }
svg.map .highlight.foe { stroke: #c0281c; }
svg.map .highlight.held { stroke: #fff; }
/* Redrawn over the role colour, so two neighbours wearing the same one still part. */
svg.map .highlight.seam { stroke: #2f2a24; stroke-width: 2; stroke-linejoin: round; }

.role {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.4rem;
  border: 1px solid var(--rule);
  vertical-align: baseline;
}
.role.leader { background: #fff; }
.role.member { background: #e0b500; }
.role.foe { background: #c0281c; }

h2.sub { margin-top: 0.8rem; }