:root {
	color-scheme: light;
	--bg: #e4e3d8; --card: #f3f2e9; --ink: #1b1f12; --ink2: #444a33; --mute: #676b57; --line: #c9c7b5; --soft: #e6e4d7;
	--acc: #4d6b1f; --acc-ink: #f3f2e9; --a: #557d1e; --b: #3b6fb0; --good: #3f7a1a; --bad: #b3261e;
	--p0: #557d1e; --p1: #3b6fb0; --p2: #c9447a; --p3: #9a7a00; --p4: #6a4fc0;
	--nav: #232a14; --nav-ink: #d7dcbf; --nav-mute: #8f977a; --nav-on: #f0c419;
	--head: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--stencil: "Saira Stencil One", "Arial Black", Impact, sans-serif;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--bg: #111309; --card: #1a1d12; --ink: #eceedd; --ink2: #c3c6ae; --mute: #8e927a; --line: #30352a; --soft: #22261a;
		--acc: #f0c419; --acc-ink: #111309; --a: #6f9e2a; --b: #5b93d6; --good: #f0c419; --bad: #e66767;
		--p0: #6f9e2a; --p1: #5b93d6; --p2: #d6588c; --p3: #b08e00; --p4: #8f72dc;
		--nav: #0b0d06;
	}
}
:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #111309; --card: #1a1d12; --ink: #eceedd; --ink2: #c3c6ae; --mute: #8e927a; --line: #30352a; --soft: #22261a;
	--acc: #f0c419; --acc-ink: #111309; --a: #6f9e2a; --b: #5b93d6; --good: #f0c419; --bad: #e66767;
		--p0: #6f9e2a; --p1: #5b93d6; --p2: #d6588c; --p3: #b08e00; --p4: #8f72dc;
	--nav: #0b0d06;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3 { margin: 0; line-height: 1.15; font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
h1 { font-size: 22px; }
h2 { font-size: 18px; margin-bottom: 4px; }
h3 { font-size: 13px; }
p { margin: 6px 0; }
a { color: var(--acc); }
.mute { color: var(--mute); }
.small { font-size: 13px; }
.lower { text-transform: none; letter-spacing: 0; font-weight: 400; font-family: system-ui, sans-serif; font-size: 12px; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
input, select { font: inherit; color: var(--ink); }
code { font-size: 13px; }

/* ---------- shell: sidebar + main ---------- */
.side-nav { position: fixed; inset: 0 auto 0 0; width: 212px; background: var(--nav); color: var(--nav-ink); display: flex; flex-direction: column; padding: 14px 0; z-index: 6; }
.side-nav a { color: var(--nav-ink); text-decoration: none; display: flex; gap: 10px; align-items: center; padding: 10px 18px; font-family: var(--head); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 15px; border-left: 3px solid transparent; }
.side-nav a:hover { background: rgb(255 255 255 / .05); }
.side-nav a[aria-current="page"] { border-left-color: var(--nav-on); color: #fff; background: rgb(240 196 25 / .12); }
.side-nav .ni { width: 18px; text-align: center; color: var(--nav-on); }
.side-nav .brand { padding: 4px 18px 18px; margin-bottom: 8px; border-bottom: 1px solid rgb(255 255 255 / .08); border-left: 0; background: none !important; }
.side-nav .brand img { width: 48px; height: 48px; }
.side-nav .wm { font-family: var(--stencil); font-size: 20px; line-height: 1; letter-spacing: .08em; color: #eeece4; }
.nav-foot { margin-top: auto; padding: 14px 18px 4px; font-size: 12px; color: var(--nav-mute); }
.main { margin-left: 212px; min-width: 0; }

.bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between;
	padding: 12px 24px; background: var(--card); border-bottom: 2px solid var(--acc); }
.top-ctl { display: flex; gap: 10px 20px; align-items: center; flex-wrap: wrap; }
.ctl { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink2); font-family: var(--head); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ctl input[type=number] { width: 64px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); font-family: system-ui; }
.days input { width: 140px; accent-color: var(--acc); }
.days b { min-width: 100px; color: var(--ink); }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--acc); border-radius: 2px; padding: 12px 14px; min-width: 0; }
.card.side-a { border-top-color: var(--a); }
.card.side-b { border-top-color: var(--b); }
.card-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 8px; }
.card-head h2 { margin-right: auto; }

.btn { border: 1px solid var(--line); background: var(--card); border-radius: 2px; padding: 7px 14px; font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 14px; }
.btn:hover:not(:disabled) { border-color: var(--acc); }
.btn:disabled { opacity: .45; }
.btn.primary { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.small-btn { padding: 4px 12px; font-size: 12px; margin-left: auto; }
.link { border: 0; background: none; color: var(--acc); padding: 0; font-size: 13px; text-decoration: underline; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 2px; flex-wrap: wrap; background: var(--bg); }
.seg button { border: 0; background: none; padding: 5px 12px; color: var(--ink2); display: inline-flex; gap: 6px; align-items: center; font-family: var(--head); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--acc); color: var(--acc-ink); }
.seg img { width: 18px; height: 18px; object-fit: contain; }

.tag { width: 22px; height: 22px; border-radius: 2px; background: var(--a); color: #fff; font-weight: 700; font-size: 12px; display: inline-grid; place-items: center; flex: none; font-family: var(--head); }
.tag.b { background: var(--b); }

/* ---------- calculator layout: editor + masonry of cards ---------- */
.calc { display: grid; grid-template-columns: minmax(480px, 620px) minmax(0, 1fr); gap: 12px; padding: 0 12px 12px; align-items: start; }
.left { display: grid; gap: 12px; min-width: 0; }
.masonry { columns: 460px; column-gap: 12px; }
.masonry > .card { break-inside: avoid; margin-bottom: 12px; width: 100%; display: inline-block; }

.editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; border-top-color: var(--a); }
.editor.b { border-top-color: var(--b); }
.tabs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.tabs [role=tab] { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--line); background: var(--bg); border-radius: 2px; padding: 5px 12px 5px 5px; max-width: 45%; }
.tabs [role=tab] .tn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs [role=tab][aria-selected="true"] { border-color: var(--a); box-shadow: inset 0 -3px 0 var(--a); background: var(--card); font-weight: 600; }
.tabs [role=tab].b[aria-selected="true"] { border-color: var(--b); box-shadow: inset 0 -3px 0 var(--b); }
.p-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.p-head input { flex: 1; min-width: 160px; border: 0; border-bottom: 1px dashed var(--line); background: none; font: 700 22px var(--head); text-transform: uppercase; letter-spacing: .03em; padding: 2px 0; }
.p-head input:focus { border-bottom-color: var(--acc); outline: none; }
.src { font-size: 13px; color: var(--mute); margin-top: -10px; }

.block h3 { color: var(--ink2); margin-bottom: 8px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.pick select { min-width: 0; width: 100%; padding: 7px 8px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); }
.hint { font-size: 13px; color: var(--mute); margin-top: 6px; }

.res { display: flex; flex-wrap: wrap; gap: 6px; }
.res button, .own button, .tgl { border: 1px solid var(--line); background: var(--bg); border-radius: 2px; }
.res button { padding: 6px 10px; display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.res button img { width: 20px; height: 20px; object-fit: contain; }
.res button[aria-pressed="true"], .own button[aria-pressed="true"] { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 16%, var(--card)); font-weight: 600; box-shadow: inset 3px 0 0 var(--acc); }

.tgls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.tgl { display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px; font-size: 14px; }
.tgl .box { width: 18px; height: 18px; border: 2px solid var(--ink2); border-radius: 2px; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.tgl[aria-pressed="true"] { border-color: var(--acc); }
.tgl[aria-pressed="true"] .box { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }

.slider { display: grid; grid-template-columns: 28px 100px 1fr 72px; gap: 10px; align-items: center; margin: 4px 0; }
.slider .ic { width: 28px; height: 22px; object-fit: contain; background: var(--nav); border-radius: 2px; padding: 2px; color: #eeece4; text-align: center; font-size: 12px; line-height: 18px; }
.slider input[type=range] { accent-color: var(--acc); width: 100%; }
.slider input[type=number] { width: 72px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); text-align: right; }

.own { display: grid; gap: 6px; }
.own button { padding: 8px 10px; text-align: left; display: grid; gap: 1px; }
.own button b { font-size: 14px; }
.own button span { font-size: 12px; color: var(--mute); }

/* buildings table in the editor */
.btable { width: 100%; border-collapse: collapse; }
.btable th { font: 600 12px var(--head); text-transform: uppercase; letter-spacing: .05em; color: var(--mute); text-align: left; padding: 4px 6px; }
.btable td { padding: 6px; border-top: 1px solid var(--line); vertical-align: middle; }
.btable tr.on td { background: color-mix(in srgb, var(--acc) 7%, transparent); }
.btable td.art { width: 64px; padding: 2px 4px; }
.btable td.art img { width: 60px; height: 55px; object-fit: contain; display: block; }
.btable td b { font-size: 14px; }
.btable .small { font-size: 12px; line-height: 1.3; }
.step { display: flex; align-items: center; gap: 4px; }
.step button { width: 26px; height: 26px; border-radius: 2px; border: 1px solid var(--line); background: var(--bg); line-height: 1; padding: 0; font-weight: 700; }
.step button:disabled { opacity: .35; }
.step b { min-width: 30px; text-align: center; font-size: 13px; }
.qbtns { display: flex; gap: 4px; flex-wrap: wrap; }
.btn.q { padding: 4px 8px; font-size: 13px; white-space: nowrap; }

/* compact text queue */
.queue { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); }
.queue li { display: grid; grid-template-columns: 14px 20px minmax(120px, auto) 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; background: var(--card); font-size: 13px; }
.queue li + li { border-top: 1px solid var(--line); }
.queue li:nth-child(even) { background: var(--soft); }
.queue li.skip { opacity: .55; }
.queue li.drag { opacity: .4; }
.queue li.over { box-shadow: inset 0 3px 0 var(--acc); }
.queue .grip { cursor: grab; color: var(--mute); user-select: none; }
.queue .num { color: var(--mute); text-align: right; font-variant-numeric: tabular-nums; }
.queue .qn { font-size: 14px; }
.queue .qd { color: var(--ink2); }
.queue .acts { display: flex; }
.queue .acts button { border: 0; background: none; width: 26px; height: 26px; color: var(--ink2); }
.queue .acts button:hover:not(:disabled) { background: var(--line); }
.queue .acts button:disabled { opacity: .3; }
.empty { color: var(--mute); font-size: 14px; border: 1px dashed var(--line); padding: 12px; text-align: center; }
.qsum { font-size: 13px; color: var(--ink2); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }

.cost { display: inline-flex; gap: 8px; flex-wrap: wrap; vertical-align: middle; }
.cost span { display: inline-flex; gap: 2px; align-items: center; font-variant-numeric: tabular-nums; }
.cost img { width: 14px; height: 14px; object-fit: contain; }

/* results */
.who { display: flex; gap: 8px; align-items: center; font-weight: 600; margin: 12px 0 6px; }
.out { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.stat { background: var(--soft); border-left: 3px solid var(--acc); padding: 8px 10px; }
.stat .l { font-size: 12px; color: var(--mute); display: flex; gap: 6px; align-items: center; }
.stat .l img { width: 18px; height: 18px; object-fit: contain; }
.stat .v { font: 700 26px/1.1 var(--head); font-variant-numeric: tabular-nums; }
.stat .grow { font-size: 16px; color: var(--good); }
.stat .s { font-size: 12px; color: var(--ink2); }

.tl { margin-top: 8px; }
.tl-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.tl-track { position: relative; flex: 1; height: 28px; background: var(--soft); border: 1px solid var(--line); overflow: hidden; }
.tl-bar { position: absolute; top: 3px; bottom: 3px; background: color-mix(in srgb, var(--a) 28%, var(--card)); border: 1px solid var(--a);
	display: flex; align-items: center; padding: 0 4px; overflow: hidden; font: 700 11px var(--head); white-space: nowrap; }
.tl-bar.b { background: color-mix(in srgb, var(--b) 28%, var(--card)); border-color: var(--b); }
.tl-out { position: absolute; top: 0; bottom: 0; right: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--mute) 30%, transparent) 6px 8px); border-left: 2px dashed var(--mute); }
.tl-axis { position: relative; height: 18px; font-size: 11px; color: var(--mute); }
.tl-axis.ind { margin-left: 30px; }
.tl-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.tl-axis span:first-child { transform: none; }

.chart { position: relative; margin-top: 10px; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid line { stroke: var(--line); }
.chart .axis text { fill: var(--mute); font-size: 11px; }
.chart .lbl { font-size: 12px; font-weight: 600; fill: var(--ink); }
.chart .cross { stroke: var(--mute); stroke-dasharray: 3 3; }
.legend { display: flex; gap: 14px; font-size: 13px; color: var(--ink2); margin: 2px 0 6px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 6px; }
.tip { position: fixed; pointer-events: none; z-index: 10; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--acc); padding: 8px 10px; font-size: 13px; box-shadow: 0 4px 16px rgb(0 0 0 / .2); }
.tip div { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.tip i { width: 10px; height: 3px; display: inline-block; }

.scroll { overflow-x: auto; }
table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.totals { width: 100%; margin-top: 12px; }
.totals th, .totals td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.totals th:first-child, .totals td:first-child { text-align: left; }
.totals thead th { font: 600 12px var(--head); text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.totals td img { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; margin-right: 6px; }
.pos { color: var(--good); font-weight: 600; }
.neg { color: var(--bad); font-weight: 600; }

#explain { display: grid; gap: 6px; margin-top: 10px; }
.ex { border: 1px solid var(--line); padding: 8px 12px; background: var(--bg); }
.ex summary { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.ex summary img { width: 20px; height: 20px; object-fit: contain; }
.ex summary .total { margin-left: auto; font: 700 20px var(--head); font-variant-numeric: tabular-nums; }
.ex summary .mute { font-size: 13px; }
.ex[open] summary { margin-bottom: 6px; }
.ex .row { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.ex .row.sub { padding-left: 14px; font-size: 14px; }
.ex .row code { font-weight: 700; color: var(--acc); font-family: inherit; font-size: 15px; }
.ex .row span { grid-column: 1 / -1; font-size: 13px; color: var(--mute); }

/* ---------- doc pages: table of contents + full-width stacked cards ---------- */
.doc { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 16px; align-items: start; }
.toc { position: sticky; top: 72px; display: grid; border-left: 2px solid var(--line); }
.toc a { color: var(--ink2); text-decoration: none; padding: 5px 12px; font-size: 14px; margin-left: -2px; border-left: 2px solid transparent; }
.toc a:hover { color: var(--ink); border-left-color: var(--acc); }
.stack { display: grid; gap: 16px; min-width: 0; }
.rules p { max-width: 90ch; }
pre.f { background: var(--nav); color: #eeece4; padding: 10px 14px; overflow-x: auto; font-size: 14px; border-left: 3px solid var(--nav-on); white-space: pre-wrap; }
.t { width: 100%; margin: 8px 0; }
.t th, .t td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.t th { font: 600 12px var(--head); text-transform: uppercase; letter-spacing: .04em; color: var(--mute); }
.t.lv td.art { width: 70px; padding: 2px 6px; }
.t.lv td.art img { width: 64px; height: 59px; object-fit: contain; display: block; }
.bhead { display: flex; gap: 16px; align-items: center; margin-bottom: 6px; }
.bhead img { width: 96px; height: 88px; object-fit: contain; flex: none; }

@media (max-width: 1200px) {
	.calc { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
	.side-nav { position: static; width: auto; flex-direction: row; flex-wrap: wrap; padding: 6px; }
	.side-nav .brand { padding: 4px 10px; border: 0; margin: 0; }
	.side-nav .brand img { width: 32px; height: 32px; }
	.side-nav .wm, .nav-foot { display: none; }
	.side-nav a { padding: 8px 10px; font-size: 13px; }
	.main { margin-left: 0; }
	.bar { position: static; padding: 10px 16px; }
	.calc, .doc { padding: 10px; grid-template-columns: minmax(0, 1fr); }
	.toc { display: none; }
	.masonry { columns: 1; }
	.slider { grid-template-columns: 28px 1fr 64px; }
	.slider .sl-name { display: none; }
	.days input { width: 110px; }
	.btable td.art img { width: 44px; height: 40px; }
	.queue li { grid-template-columns: 14px 18px 1fr auto; }
	.queue .qd, .queue .qc { grid-column: 3 / -1; }
}

/* (i) buttons and their floating popup */
.info { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid var(--mute); background: none; color: var(--mute);
	font: italic 700 11px/1 Georgia, serif; padding: 0; vertical-align: middle; text-transform: none; letter-spacing: 0; flex: none; }
.info:hover, .info:focus-visible { border-color: var(--acc); color: var(--acc); outline: none; }
.pop { position: fixed; z-index: 20; max-width: 300px; background: var(--nav); color: #eeece4; border-left: 3px solid var(--nav-on); padding: 9px 12px; font: 13px/1.45 system-ui, sans-serif;
	box-shadow: 0 6px 20px rgb(0 0 0 / .3); text-transform: none; letter-spacing: 0; }
.pop-x { float: right; margin: -4px -6px 0 8px; border: 0; background: none; color: #eeece4; font-size: 14px; }
.tgl-wrap { display: inline-flex; gap: 6px; align-items: center; }
.sl-name { display: inline-flex; gap: 6px; align-items: center; }
.stock { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.report { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--mute); }
.report:hover { color: var(--acc); }

/* ---------- round 5: strip, compact city card, lanes, mobile nav ---------- */
.strip { padding: 10px 12px; display: grid; gap: 6px; }
.srow { display: flex; flex-wrap: wrap; align-items: stretch; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--a); }
.srow.side-b { border-left-color: var(--b); }
.sname { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 12px; min-width: 150px; border-right: 1px solid var(--line); font-size: 13px; }
.sname b { font: 700 16px/1.1 var(--head); text-transform: uppercase; letter-spacing: .03em; display: flex; gap: 6px; align-items: center; }
.sname .tag { display: none; }
.sc { display: grid; padding: 5px 12px; border-right: 1px solid var(--line); min-width: 0; }
.sc .sl { font-size: 11px; color: var(--ink2); display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.sc .sl img { width: 15px; height: 15px; object-fit: contain; }
.sc > b { font: 700 22px/1.1 var(--head); font-variant-numeric: tabular-nums; }
.sc > b small { font-size: 12px; font-weight: 600; color: var(--mute); margin-left: 2px; }
.sc .tot { font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.sfoot { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; font-size: 12px; }
.sfoot .report { margin: 0 0 0 auto; }

#city { display: grid; gap: 8px; }
.row2 { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; align-items: center; }
.row2 > .seg ~ .btn, .row2 > .seg ~ .info { justify-self: start; }
.row2:has(> .seg ~ .btn) { grid-template-columns: 76px auto auto auto 1fr; }
.lbl { font: 600 12px var(--head); text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); display: inline-flex; gap: 5px; align-items: center; }
.lockline { font-size: 12px; color: var(--ink2); background: var(--soft); padding: 4px 8px; border-left: 3px solid var(--acc); }
.state { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 4px 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 8px; }
.state .lbl { grid-row: span 2; align-self: start; padding-top: 6px; }
.state .slider { grid-column: 2; grid-template-columns: 26px 1fr 64px; margin: 0; }
.slider input[type=number] { width: 64px; }
.res button { padding: 4px 8px; font-size: 13px; }
.res button img { width: 17px; height: 17px; }
.res button:disabled:not([aria-pressed="true"]) { opacity: .4; }
.tgl { padding: 4px 8px; font-size: 13px; }
.tgl:disabled { opacity: .6; }
.seg button { padding: 4px 10px; font-size: 13px; }

.bcard h2 .mute { font-size: 14px; }
.btable td { padding: 3px 5px; }
.btable td.art { width: 50px; }
.btable td.art img { width: 46px; height: 42px; }
.btable th { padding: 2px 5px; }
.btn.q { padding: 3px 7px; font-size: 12px; }
.upk { font-size: 12px; color: var(--ink2); margin-top: 6px; }
.qh { margin: 10px 0 6px; display: flex; gap: 6px; align-items: center; color: var(--ink2); }
.queue li { padding: 4px 8px; }
.narrow-only { display: none; }

.lane { font-size: 10px; fill: var(--mute); text-transform: uppercase; letter-spacing: .05em; }
.lane-bg { fill: var(--soft); }
.bl { font: 700 9px var(--head); fill: #fff; pointer-events: none; }
.bl.dark { fill: var(--ink2); }
.lbl.sm { font-size: 10px; }
.tip .mute { font-size: 12px; }

.burger { display: none; }
@media (max-width: 800px) {
	.burger { display: block; position: fixed; top: 8px; right: 8px; z-index: 30; width: 40px; height: 40px; border: 1px solid var(--line); background: var(--nav); color: #eeece4; font-size: 20px; border-radius: 2px; }
	.side-nav { position: fixed; inset: 0 auto 0 0; width: 240px; flex-direction: column; flex-wrap: nowrap; padding: 14px 0; transform: translateX(-100%); transition: transform .2s; z-index: 25; }
	.side-nav .wm, .nav-foot { display: block; }
	.side-nav a { font-size: 15px; padding: 10px 18px; }
	body.nav-open .side-nav { transform: none; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .4); }
	.bar { padding-right: 56px; }
	.narrow-only { display: inline-flex; }
	.bcard[data-bview="table"] .qwrap, .bcard[data-bview="queue"] .bwrap { display: none; }
	.bcard[data-bview="queue"] .qh { display: none; }
	.row2, .state { grid-template-columns: 1fr; }
	.row2:has(> .seg ~ .btn) { grid-template-columns: auto auto 1fr; }
	.row2:has(> .seg ~ .btn) > .lbl { grid-column: 1 / -1; }
	.state .lbl { grid-row: auto; }
	.state .slider { grid-column: 1; }
	.sname { min-width: 100%; border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; justify-content: space-between; }
	.sc { flex: 1 1 30%; }
	.calc { padding: 0 8px 8px; }
	.strip { padding: 8px; }
}
.sc .sl img.dk { background: var(--nav); border-radius: 2px; padding: 1px; width: 18px; }
.sc .tot { white-space: nowrap; }

/* ---------- round 6 ---------- */
.ri { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; }
.ri.big { width: 40px; height: 40px; }
.res button { padding: 3px 6px; }
.res button .ri { width: 30px; height: 30px; }
.seg.icons button { padding: 2px 8px; }
.seg.icons .ri { width: 26px; height: 26px; }
.cost img { width: 18px; height: 18px; }
.ti { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-right: 3px; }
/* population and morale: the white game glyphs used as a mask, so they take the text colour in light and dark */
.mk { display: inline-block; width: 24px; height: 20px; background: currentColor; color: var(--ink2);
	-webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; vertical-align: middle; flex: none; }
.mk-pop { -webkit-mask-image: url(/web/icons/population.png); mask-image: url(/web/icons/population.png); }
.mk-mor { -webkit-mask-image: url(/web/icons/morale.png); mask-image: url(/web/icons/morale.png); }
.state .slider { grid-template-columns: 28px 1fr 64px; }
.mtarget { grid-column: 2; font-size: 12px; color: var(--ink2); display: flex; gap: 6px; align-items: center; }
.sc { grid-template-columns: auto auto; column-gap: 8px; align-items: center; }
.sc .sic { grid-row: span 2; display: grid; place-items: center; }
.sc .sic .ri { width: 34px; height: 34px; }
.sc .sic .mk { width: 28px; height: 24px; }
.row2 > * { justify-self: start; }
.row2 > .pick, .row2 > .res { justify-self: stretch; }
.acr { display: inline-block; min-width: 28px; padding: 1px 5px; font: 700 11px/1.4 var(--head); letter-spacing: .04em; text-align: center;
	background: var(--nav); color: #eeece4; border-radius: 2px; vertical-align: middle; }
.queue li { grid-template-columns: 14px 18px auto 1fr auto auto; padding: 3px 8px; font-size: 13px; }
.queue .qc .cost { gap: 6px; font-size: 12px; }
.queue .qc .cost img { width: 15px; height: 15px; }
.toc-h { font: 700 11px var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); padding: 10px 12px 2px; }
.toc .acr { min-width: 26px; font-size: 10px; }
.side-nav a.sub { padding: 5px 18px 5px 46px; font-size: 13px; text-transform: none; letter-spacing: 0; font-family: system-ui, sans-serif; font-weight: 400; color: var(--nav-mute); }
.lane-bg { fill: var(--soft); }
.mgrid { stroke: var(--line); stroke-dasharray: 2 3; }
.axis-t { font-size: 10px; fill: var(--mute); }
@media (max-width: 800px) {
	.queue li { grid-template-columns: 14px 18px auto 1fr auto; }
	.queue .qc { grid-column: 3 / -1; }
}
#btoc { display: grid; }
#btoc a { display: flex; gap: 6px; align-items: center; }
.queue li { grid-template-columns: 14px 18px 46px max-content minmax(0, 1fr) auto; }
.queue .qd { white-space: nowrap; }
.queue .qc { justify-self: end; text-align: right; }
.queue .qc .cost { justify-content: flex-end; }
@media (max-width: 800px) {
	.sc { flex: 1 1 45%; min-width: 0; }
	.sc .tot { white-space: normal; }
	.queue li { grid-template-columns: 14px 18px 46px 1fr auto; }
	.queue .qc { grid-column: 3 / -1; justify-self: start; }
}
/* ---------- round 7: level pips, bigger queue buttons, up/down around the drag handle ---------- */
.lvart { position: relative; display: inline-block; line-height: 0; }
.lvart .pip { position: absolute; right: -2px; bottom: 0; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 2px; background: var(--nav); color: #eeece4;
	font: 700 11px/16px var(--head); text-align: center; border: 1px solid var(--nav-on); }
.btable td.art .lvart img { width: 50px; height: 46px; object-fit: contain; }
.btable th { white-space: nowrap; }
.btn.q { padding: 5px 10px; font-size: 13px; min-width: 64px; display: inline-flex; gap: 4px; align-items: center; justify-content: center; }
.btn.q.add:not(:disabled) { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.btn.q.max:not(:disabled) { border-color: var(--acc); color: var(--acc); }
.btn.q .bi { font-size: 14px; line-height: 1; }
.btn.q:disabled { font-size: 11px; }
.queue li { grid-template-columns: 22px 18px 46px max-content minmax(0, 1fr) auto; }
.mover { display: grid; justify-items: center; line-height: 1; }
.mover button { border: 0; background: none; color: var(--ink2); font-size: 12px; padding: 1px 5px; }
.mover button:hover:not(:disabled) { color: var(--acc); background: var(--line); }
.mover button:disabled { opacity: .25; }
.mover .grip { font-size: 13px; line-height: 1; }
@media (max-width: 800px) {
	.queue li { grid-template-columns: 22px 18px 46px 1fr auto; }
	.mover button { font-size: 14px; padding: 2px 8px; }
}

.report { border: 0; background: none; padding: 0; font-size: 12px; color: var(--mute); text-decoration: underline; }
.report:hover { color: var(--acc); }
.pop .pop-btn { display: inline-block; margin-top: 8px; text-decoration: none; font-size: 12px; padding: 5px 12px; }
.pop .rep { width: 100%; height: 110px; margin-top: 6px; font: 12px/1.4 monospace; background: #0b0d06; color: #eeece4; border: 1px solid #3d4a1c; }

/* ---------- round 8 ---------- */
.cbtn { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; width: 100%; padding: 4px 8px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); text-align: left; }
.cbtn:disabled { opacity: .5; }
.cbtn .caret { color: var(--mute); font-size: 11px; }
.cl { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.cl .ri { width: 24px; height: 24px; }
.star { color: #e0b020; font-size: 15px; text-shadow: 0 0 1px #6b5200; }
.cpop { font-size: 11px; white-space: nowrap; }
.clist { position: fixed; z-index: 22; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--acc); box-shadow: 0 8px 24px rgb(0 0 0 / .25); display: grid; }
.clist button { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 4px 10px; text-align: left; }
.clist button:hover, .clist button[aria-pressed="true"] { background: color-mix(in srgb, var(--acc) 14%, var(--card)); }
.lockchip { font-size: 12px; color: var(--ink2); background: var(--soft); border: 1px solid var(--line); padding: 2px 8px; border-radius: 2px; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.sc { display: flex; align-items: center; gap: 6px; padding: 6px 12px; }
.sc .from { color: var(--mute); font: 600 15px var(--head); font-variant-numeric: tabular-nums; }
.sc .arr { color: var(--acc); font-weight: 700; }
.sc > b { font-size: 22px; }
.sc .sic .ri { width: 32px; height: 32px; }
.sc .sic .mk { width: 30px; height: 26px; }
.sname .mute { font-size: 11px; }
.mk { width: 30px; height: 24px; }
.mk-pop { width: 32px; }
.stock-h { font: 600 12px var(--head); text-transform: uppercase; letter-spacing: .05em; color: var(--mute); margin: 12px 0 6px; }
.srow2 { display: flex; flex-wrap: wrap; align-items: stretch; border: 1px solid var(--line); background: var(--bg); margin-bottom: 4px; }
.srow2 .sl2 { display: grid; place-items: center; min-width: 38px; font: 700 12px var(--head); color: var(--ink2); border-right: 1px solid var(--line); padding: 0 6px; }
.srow2 .sl2:empty { display: none; }
.srow2 .cell { display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-right: 1px solid var(--line); flex: 1 1 auto; font-variant-numeric: tabular-nums; }
.srow2 .cell .ri { width: 22px; height: 22px; }
.srow2 .cell b { font: 700 15px var(--head); }
.srow2 .cell.sel { background: color-mix(in srgb, var(--acc) 18%, var(--card)); box-shadow: inset 0 -3px 0 var(--acc); }
.res button[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--acc); background: color-mix(in srgb, var(--acc) 22%, var(--card)); opacity: 1 !important; }

/* ---------- round 9: badges, queue gantt table, compact chains, strip tabs ---------- */
.acr { min-width: 0; padding: 2px 7px; font: 700 13px/1.3 var(--head); letter-spacing: .08em; }
.acr i { font-style: normal; color: var(--nav-on); margin-left: 1px; }
.btable td.art img, img.lvimg { width: 50px; height: 46px; object-fit: contain; display: block; }
.t.lv td.art img.lvimg { width: 64px; height: 59px; }
.seg .count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 2px; background: var(--nav); color: #eeece4; font-size: 11px; margin-left: 4px; }
.qtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.qtable th { font: 600 11px var(--head); text-transform: uppercase; letter-spacing: .04em; color: var(--mute); padding: 4px 6px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.qtable td { padding: 3px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; vertical-align: middle; }
.qtable tbody tr:nth-child(even) { background: var(--soft); }
.qtable tr.skip { opacity: .5; }
.qtable tr.drag { opacity: .35; }
.qtable tr.over td { box-shadow: inset 0 3px 0 var(--acc); }
.qtable td.mv { display: grid; justify-items: center; padding: 0 2px; }
.qtable td.mv button { border: 0; background: none; font-size: 11px; line-height: 1; padding: 2px 8px; color: var(--ink2); border-radius: 2px; }
.qtable td.mv button:hover:not(:disabled) { background: var(--acc); color: var(--acc-ink); }
.qtable td.mv button:disabled { opacity: .2; }
.qtable .grip { cursor: grab; color: var(--mute); font-size: 14px; line-height: 1; }
.qtable td.num { color: var(--mute); width: 1%; }
.qtable td:nth-child(3) { text-align: left; width: 1%; }
.qtable .gantt, .qtable .gantt-h, .qtable .gantt-f { position: relative; min-width: 160px; width: 40%; text-align: left; }
.qtable .gbar { position: absolute; top: 7px; bottom: 7px; background: var(--acc); border-radius: 1px; }
.side-b ~ * .gbar, .bcard.side-b .gbar { background: var(--b); }
.gscale { position: relative; height: 14px; }
.gscale span { position: absolute; transform: translateX(-50%); font-weight: 600; }
.gscale span:first-child { transform: none; }
.qtable .gantt-f { font-size: 12px; color: var(--ink2); }
.qtable th.rc, .qtable td.rc { min-width: 54px; }
.qtable th.rc .ri { width: 24px; height: 24px; }
.qtable td.t .mute { font-size: 11px; }
.qtable tfoot td { border-bottom: 0; border-top: 2px solid var(--line); background: var(--bg); }
.qtable tfoot td:first-child { text-align: left; }
.qtable .rm { border: 1px solid transparent; background: none; color: var(--bad); width: 26px; height: 26px; border-radius: 2px; font-weight: 700; }
.qtable .rm:hover { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.srow.tabbable { cursor: pointer; opacity: .75; }
.srow.tabbable[aria-selected="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--a); }
.srow.tabbable.side-b[aria-selected="true"] { box-shadow: 0 0 0 2px var(--b); }
.srow.tabbable:hover { opacity: 1; }
.sfoot { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
#tabs:empty { display: none; }
.chain { display: grid; grid-template-columns: 34px 1fr; gap: 4px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.chain:last-child { border-bottom: 0; }
.chain > .ri { width: 34px; height: 34px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.chip { display: inline-grid; justify-items: center; padding: 2px 7px; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; line-height: 1.1; cursor: help; }
.chip b { font: 700 15px var(--head); font-variant-numeric: tabular-nums; }
.chip small { font-size: 10px; color: var(--mute); white-space: nowrap; }
.chip.res { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); cursor: default; }
.chip.res small { color: var(--acc-ink); opacity: .8; }
.op { color: var(--mute); font-weight: 700; }
.subs { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink2); }

/* sidebar close (all sizes) */
.nav-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 1px solid rgb(255 255 255 / .15); background: none; color: var(--nav-ink); border-radius: 2px; font-size: 16px; line-height: 1; }
.nav-x:hover { background: rgb(255 255 255 / .08); }
body.nav-closed .side-nav { display: none; }
body.nav-closed .main { margin-left: 0; }
body.nav-closed .burger { display: block; position: fixed; top: 10px; left: 10px; z-index: 30; width: 38px; height: 38px; border: 1px solid var(--line); background: var(--nav); color: #eeece4; font-size: 18px; border-radius: 2px; }
body.nav-closed .bar { padding-left: 60px; }
@media (max-width: 800px) {
	body.nav-closed .side-nav { display: flex; }
	body.nav-closed .burger { left: auto; right: 8px; top: 8px; }
	body.nav-closed .bar { padding-left: 16px; }
}

.twin { color: var(--ink2); font-style: italic; }
.qtable tr.late { opacity: .45; }
.qtable .gcut { position: absolute; top: 0; bottom: 0; right: 0; border-left: 2px dashed var(--mute);
	background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--mute) 22%, transparent) 5px 7px); pointer-events: none; }
.clist[hidden] { display: none; }

/* ---------- round 10: output table + stockpile grid (icons once, on top) ---------- */
.strip { padding: 8px 12px; }
.stable { display: grid; background: var(--card); border: 1px solid var(--line); }
.stable .srow { display: contents; }
.stable .sh { display: grid; place-items: center; padding: 4px 6px; border-bottom: 1px solid var(--line); background: var(--bg); }
.stable .sh-name { place-items: center start; font: 600 11px var(--head); text-transform: uppercase; letter-spacing: .05em; color: var(--mute); padding-left: 12px; }
.stable .sh .ri { width: 30px; height: 30px; }
.stable .sh .ri.mp, .tgrid .ri.mp { width: 22px; height: 22px; }
.stable .sh .mk-pop { width: 34px; height: 28px; }
.stable .sh .mk-mor { width: 30px; height: 24px; }
.stable .srow > div { border-bottom: 1px solid var(--line); }
.stable .srow:last-child > div { border-bottom: 0; }
.stable .sname { display: flex; flex-direction: row; align-items: center; gap: 6px; padding: 6px 12px; border-right: 1px solid var(--line); border-left: 4px solid var(--a); min-width: 0; }
.stable .side-b .sname { border-left-color: var(--b); }
.stable .sname b { font: 700 13px/1.2 var(--head); letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stable .sname .tag { display: inline-grid; }
.stable .sc { justify-content: center; border-right: 1px solid var(--line); padding: 6px 8px; }
.stable .sc > b { font-size: 19px; }
.stable .sc .from { font-size: 13px; }
.stable .srow.tabbable { opacity: 1; box-shadow: none; }
.stable .srow.tabbable > div { cursor: pointer; opacity: .7; }
.stable .srow.tabbable.sel > div, .stable .srow.tabbable:hover > div { opacity: 1; }
.stable .srow.sel > div { background: color-mix(in srgb, var(--acc) 9%, var(--card)); }
.sact { display: flex; gap: 2px; align-items: center; justify-content: center; }
.ib { width: 26px; height: 26px; border: 1px solid var(--line); background: var(--card); border-radius: 2px; color: var(--ink2); font-size: 14px; line-height: 1; padding: 0; }
.ib:hover { border-color: var(--acc); color: var(--acc); }
.tgrid { display: grid; border: 1px solid var(--line); background: var(--bg); }
.tgrid > div { padding: 5px 6px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); display: grid; place-items: center; font: 700 15px var(--head); font-variant-numeric: tabular-nums; }
.tgrid .th { background: var(--card); }
.tgrid .th .ri { width: 26px; height: 26px; }
.tgrid .sel { background: color-mix(in srgb, var(--acc) 16%, var(--card)); }
.tgrid .th.sel { box-shadow: inset 0 -3px 0 var(--acc); }
.tgrid .tl2 { font-size: 12px; color: var(--ink2); }
.mk-pop { width: 34px; }
@media (max-width: 800px) {
	.strip { overflow-x: auto; }
	.stable { min-width: 560px; }
}
.masonry { columns: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 12px; align-items: start; }
.masonry > .card { margin-bottom: 0; display: block; }
@media (max-width: 800px) { .masonry { grid-template-columns: minmax(0, 1fr); } }

.acr i { color: inherit; }
.qtable td.days { text-align: left; white-space: nowrap; color: var(--ink2); }
.schips { display: flex; flex-wrap: wrap; gap: 6px; }
.schip { display: grid; justify-items: center; gap: 1px; min-width: 64px; padding: 6px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; }
.schip.sel { border-color: var(--acc); box-shadow: inset 0 -3px 0 var(--acc); }
.schip .ri { width: 26px; height: 26px; }
.schip .ri.mp { width: 22px; height: 22px; }
.schip b { font: 700 15px var(--head); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.schip small { font-size: 11px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 1px; background: var(--a); }
.dot.b { background: var(--b); }
.schips { flex-wrap: nowrap; overflow-x: auto; } .schip { flex: 1 1 0; min-width: 52px; padding: 5px 4px; }

/* over time spans the whole results area; output table: names left, numbers lined up, start/end closer in size */
.masonry .wide-card { grid-column: 1 / -1; }
.stable .sname { justify-content: flex-start; }
.stable .sc { justify-content: flex-end; gap: 6px; padding: 6px 14px; }
.stable .sc .from { font: 600 15px var(--head); color: var(--mute); min-width: 3.5ch; text-align: right; }
.stable .sc .arr { font-size: 13px; }
.stable .sc > b { font: 700 17px var(--head); min-width: 4.5ch; text-align: right; }
.stable .sh { place-items: center end; padding-right: 14px; }
.stable .sh-name { place-items: center start; }
#overtime svg { width: 100%; height: auto; }
#overtime .axis text { font-size: 11px; } #overtime .lane { font-size: 10px; } #overtime .lbl { font-size: 12px; }

/* calculation popup: one row, no boxes */
.pop.wide { max-width: min(92vw, 760px); }
.pop .calc { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 8px; margin-top: 6px; }
.pop .term { display: inline-grid; justify-items: center; line-height: 1.1; }
.pop .term b { font: 700 17px var(--head); color: #fff; }
.pop .term small { font-size: 10px; color: #f0c419; white-space: nowrap; }
.pop .term.res b { color: var(--nav-on); }
.pop .op { color: #8f977a; font-weight: 700; padding-top: 2px; }
.pop .f { font-family: var(--head); color: #fff; }
.stable .sc .info { margin-left: 6px; }

/* ☰: just the icon, left of the page title */
body.nav-closed .burger, .burger { border: 0 !important; background: none !important; color: var(--ink) !important; font-size: 22px; width: 36px; height: 36px; }
body.nav-closed .burger { top: 12px; left: 14px; }
body.nav-closed .bar { padding-left: 54px; }
@media (max-width: 800px) { .burger, body.nav-closed .burger { left: auto; right: 8px; top: 8px; } }

/* ---------- round 11: stockpile in the output table, stats wider, outline for the chosen plan ---------- */
@media (min-width: 1201px) { .calc { grid-template-columns: minmax(440px, 540px) minmax(0, 1fr); } }
.stable .sc { display: grid; justify-content: start; align-content: center; gap: 1px; padding: 5px 12px; }
.stable .sc .l1 { display: flex; align-items: baseline; gap: 6px; }
.stable .sc .l2 { display: flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--ink2); }
.stable .sc .l2 b { font: 700 14px var(--head); }
.stable .sc .l2 small { font-size: 11px; }
.stable .sc .sig { color: var(--mute); font-weight: 700; }
.stable .sh { place-items: center start; padding-left: 12px; }
.stable .sh-name { line-height: 1.3; }
.stable .srow.tabbable > div { opacity: 1; }
.stable .srow.sel > div { background: none; box-shadow: inset 0 2px 0 var(--a), inset 0 -2px 0 var(--a); }
.stable .srow.sel.side-b > div { box-shadow: inset 0 2px 0 var(--b), inset 0 -2px 0 var(--b); }
.stable .srow.tabbable:not(.sel):hover > div { background: color-mix(in srgb, var(--acc) 6%, var(--card)); }

.stable .sc { grid-template-columns: 1fr; }
.p-head input { min-width: 0; flex: 1 1 140px; }
.lockchip { white-space: normal; }
/* chosen plan: a wide colour bar on the left and an indent, no outline */
.stable .srow.sel > div, .stable .srow.sel.side-b > div { box-shadow: none; }
.stable .sname { transition: border-left-width .15s, padding-left .15s; }
.stable .srow.sel .sname { border-left-width: 12px; padding-left: 18px; }
.stable .srow.sel .sname b { font-size: 14px; }

/* queue: compact, stays inside its card */
.bcard { overflow: hidden; }
.bcard .scroll { max-width: 100%; }
.qtable { font-size: 12px; table-layout: auto; }
.qtable th, .qtable td { padding: 3px 4px; }
.qtable th.rc, .qtable td.rc { min-width: 0; width: 1%; }
.qtable th.rc .ri { width: 20px; height: 20px; }
.qtable td.t { width: 1%; }
.qtable td.mv button { padding: 1px 6px; }
.qtable tfoot td:first-child { font: 600 11px var(--head); text-transform: uppercase; color: var(--mute); padding-left: 8px; }
.btn.q.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); min-width: 0; }
.btn.q.danger:hover { background: color-mix(in srgb, var(--bad) 10%, var(--card)); border-color: var(--bad); }
.bcard .card-head h2 { margin-right: auto; }
.qtable th, .qtable td { padding: 3px 3px; }
.qtable td.rc { font-size: 11.5px; }
.qtable .rm { width: 22px; height: 22px; }
.qtable td:nth-child(2) { text-align: left; width: 1%; }

/* output cells: numbers on the left, (i) centred on the right; one arrow style */
.stable .sc { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; }
.stable .sc .vals { display: grid; gap: 1px; }
.stable .sc .l1 { display: flex; align-items: center; gap: 6px; }
.stable .sc .arr { width: 14px; height: 10px; color: var(--acc); flex: none; }
.stable .sc .l2 { font: 600 12px var(--head); color: var(--mute); letter-spacing: .02em; }
.stable .sc .info { margin-left: 0; flex: none; }

/* one number font everywhere */
.cost span, .qtable td, .t td, .from, .tip b, .tip div, .pop .term b, input[type=number], .step b, .stat .v, .srow2 .cell b, .schip b,
.chart .axis text, .chart .lbl, .axis-t, .ctl b, .days b, .mtarget b, .qsum, .upk, .cpop { font-family: var(--head); font-variant-numeric: tabular-nums; }
.qtable td, .t td { font-size: 13px; }
input[type=number] { font-size: 15px; font-weight: 600; }

.stable .sname .rl { margin-left: auto; display: grid; gap: 1px; text-align: right; font: 600 10px/1.45 var(--head); text-transform: uppercase; letter-spacing: .05em; color: var(--mute); }
.stable .sname .rl span:first-child { line-height: 1.9; }
.qtable td.rc { font-size: 12.5px; }

/* ---------- round 14: up to 5 plans (each with its own --pc color), slim comparison table, level squares ---------- */
#city[style*="--pc"], #blds[style*="--pc"] { border-top-color: var(--pc); }
.strip[hidden] { display: none; }
.strip { padding: 6px 12px 2px; }
.stable { border: 0; background: none; }
.stable .sh { background: none; border-bottom: 2px solid var(--line); padding: 2px 12px 4px; }
.stable .sh .ri { width: 24px; height: 24px; }
.stable .sh .ri.mp { width: 18px; height: 18px; }
.stable .sh .mk-pop { width: 26px; height: 22px; }
.stable .sh .mk-mor { width: 24px; height: 19px; }
.stable .sc, .stable .sname { border-right: 0; padding-top: 3px; padding-bottom: 3px; }
.stable .srow > div { background: var(--card); }
.stable .sname { border-left-color: var(--pc); }
.stable .tag { background: var(--pc); }
.stable .srow.sel > div { background: color-mix(in srgb, var(--pc) 10%, var(--card)); }
.stable .sact { gap: 4px; }
.ib.add { width: 30px; height: 26px; background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-weight: 700; font-size: 16px; }
.ib.add:hover { color: var(--acc-ink); filter: brightness(1.1); }
.ib:disabled { opacity: .35; pointer-events: none; }
#compare[hidden] { display: none; }

.pips { display: flex; gap: 3px; justify-content: flex-end; }
.pips .pip { min-width: 30px; height: 30px; padding: 0 6px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); color: var(--mute);
	font: 700 14px var(--head); cursor: pointer; }
.pips .pip:hover:not(:disabled) { border-color: var(--acc); color: var(--acc); }
.pips .pip.on { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.pips .pip.qd { background: color-mix(in srgb, var(--acc) 14%, var(--card)); border: 2px solid var(--acc); color: var(--acc); }
.pips .pip.one { min-width: 64px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.pips .pip:disabled { cursor: default; }
.pips .pip:disabled:not(.on) { opacity: .4; }
.bcard .btable td:last-child { width: 1%; }
@media (max-width: 520px) { .pips .pip { min-width: 24px; height: 28px; padding: 0 4px; } .pips .pip.one { min-width: 52px; } }
#qcard[hidden] { display: none; }
#qcard[style*="--pc"] { border-top-color: var(--pc); }
#qcard .qtable { width: 100%; }
#qcard .does { font-size: 13px; white-space: nowrap; }
#qcard .card-head h2 { display: flex; align-items: center; gap: 8px; }
#qcard .tag { color: #fff; }

/* ---------- round 15: picker crumbs, named sliders, tiles, queue head, plan file buttons ---------- */
.calc { padding-top: 12px; }
.strip { padding: 10px 12px 0; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.crumbs select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); max-width: 100%; }
.crumbs .sep { color: var(--mute); font-weight: 700; }
.crumb { border: 1px solid var(--line); background: var(--bg); border-radius: 2px; padding: 4px 8px; font: 600 13px var(--head); letter-spacing: .03em; cursor: pointer; }
.crumb:hover { border-color: var(--acc); }
.crumbs .cbtn { width: auto; }
.state .slider { grid-template-columns: 26px 52px minmax(0, 1fr) 64px minmax(84px, auto); }
.slider .sn { font: 600 12px var(--head); text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); }
.slider .tgt { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink2); white-space: nowrap; }
.slider .tgt b { font: 700 14px var(--head); color: var(--ink); }
@media (max-width: 520px) { .state .slider { grid-template-columns: 24px minmax(0, 1fr) 60px; } .slider .sn { display: none; } .slider .tgt { grid-column: 2 / -1; } }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 6px; }
.tile { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; gap: 2px 6px; align-items: center; padding: 5px 6px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); }
.tile.on { background: color-mix(in srgb, var(--acc) 8%, var(--card)); border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); }
.tile img { grid-row: span 2; width: 38px; height: 35px; object-fit: contain; }
.tile .acr { justify-self: start; }
.tile .tb { display: flex; gap: 3px; align-items: center; }
.tile .tb button { height: 24px; padding: 0 6px; border-radius: 2px; font: 700 13px var(--head); cursor: pointer; line-height: 1; }
.tile .t1 { background: var(--acc); border: 1px solid var(--acc); color: var(--acc-ink); }
.tile .tm { background: var(--card); border: 1px solid var(--acc); color: var(--acc); }
.tile .tb button:disabled { opacity: .35; cursor: default; }
.qhead { display: flex; align-items: center; gap: 6px; margin: 14px 0 4px; }
.qhead h3, #qcard h2 { margin: 0; font: 700 15px var(--head); text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 6px; }
.qhead h3 { margin-right: auto; }
.count { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 2px; background: var(--nav); color: #eeece4; font: 700 11px var(--head); }
.ib[data-act="clear"]:hover { color: var(--bad); border-color: var(--bad); }
.ib svg { display: block; margin: auto; }
.qtable td.mv { display: flex; gap: 2px; justify-content: center; padding: 0 2px; }
.qtable td.mv button { padding: 3px 6px; font-size: 10px; }
.qtable { table-layout: auto; }
.qtable td.days { text-align: left; }
.fileops { display: flex; gap: 4px; }
.fileops .btn.q { min-width: 0; padding: 4px 10px; cursor: pointer; }
.fileops .armed { color: var(--bad); border-color: var(--bad); }
.p-head { border-bottom: 1px dashed var(--line); padding-bottom: 8px; margin-bottom: 4px; }
.p-head input, .p-head input:focus { border-bottom: 0; }
.crumbs { flex-wrap: nowrap; min-width: 0; }
.crumbs .crumb { display: inline-flex; align-items: center; gap: 6px; width: auto; min-width: 0; max-width: 100%; padding: 4px 8px; white-space: nowrap; overflow: hidden; }
.crumbs .crumb > :first-child { overflow: hidden; text-overflow: ellipsis; }
.crumbs .crumb .cl { display: inline-flex; align-items: center; gap: 4px; }
.crumbs .crumb .cpop { display: none; }
.crumbs .crumb:first-child { flex: none; }
/* row buttons: all the same square; (i) sits right after its numbers */
.stable .sact { display: flex; gap: 4px; justify-content: flex-end; align-items: center; padding: 0 6px; }
.stable .ib, .stable .ib.add { width: 28px; height: 28px; font-size: 14px; display: grid; place-items: center; padding: 0; }
.stable .sc { justify-content: flex-start !important; gap: 10px; }
.stable .sc .vals { min-width: 9ch; }
.seg.icons button { width: 38px; height: 34px; padding: 0; display: grid; place-items: center; }
.seg.icons button + button { border-left: 1px solid var(--line); }
/* selected plan: a slightly thicker bar and a faint tint, no indent */
.stable .sname, .stable .srow.sel .sname { border-left-width: 4px; padding-left: 10px; }
.stable .srow.sel .sname { border-left-width: 6px; padding-left: 8px; }
.stable .srow.sel .sname b { font-size: 13px; }
.stable .sc .l2 { font: 600 14px var(--head); color: var(--ink2); letter-spacing: .01em; }
.stable .sc .l1 .from, .stable .sc .l2 { font-size: 14px; }
/* build tiles: no box, big picture, acronym tucked under it, buttons below */
.tiles { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px 6px; }
.tile, .tile.on { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0; border: 0; background: none; }
.tile img { width: 76px; height: 68px; object-fit: contain; }
.tile .acr { position: relative; margin-top: -12px; justify-self: auto; }
.tile .tb { margin-top: 6px; gap: 8px; min-height: 26px; }
.tile .tb button { height: 26px; padding: 0 8px; display: inline-flex; align-items: center; gap: 3px; }
.tile:not(.on) img { opacity: .75; }
/* all build tiles in one row; the two buttons stack when a tile is narrow */
.tiles { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
.tile, .tile.on { flex: 1 1 0; min-width: 62px; }
.tile img { width: 62px; height: 56px; }
.tile .tb { flex-wrap: wrap; justify-content: center; gap: 4px; }
.tile .tb button { height: 24px; padding: 0 7px; }
.qhead h3 { margin-right: 0; }
.qhead .clr { margin-left: auto; }

/* ---------- round 16 ---------- */
/* top table: one line per cell, "start → end (total)"; one (i) per column in the header */
.stable .sh { display: flex; align-items: center; gap: 6px; padding: 2px 12px; }
.stable .sh.sact { justify-content: flex-end; padding: 2px 6px; }
.stable .sh .info { width: 16px; height: 16px; font-size: 10px; }
.stable .sc { display: flex !important; align-items: baseline; justify-content: flex-start !important; gap: 6px; padding: 6px 12px; white-space: nowrap; }
.stable .sc .arr { align-self: center; }
.stable .sname { padding-top: 6px; padding-bottom: 6px; }
.stable .sname .rl { display: block; font: 600 10px var(--head); text-transform: uppercase; letter-spacing: .05em; color: var(--mute); white-space: nowrap; }
.stable .sname .rl span { color: var(--mute); }

/* one font for every number: Barlow Condensed with even-width digits.
   start / end / total differ by weight and colour, barely by size */
.stable .sc, .stable .sc .from, .stable .sc b, .stable .sc .tot, .slider input[type=number], .slider .tgt b, .count, .acr, .acr i,
.tile .tb button, .qtable td, .qtable th, .upk, .cost span, .t td, .chart text, .tip, .tip b, .pop .calc, .pop .term b, .crumb .cpop,
.pips .pip, .ctl b, .days b { font-family: var(--head); font-variant-numeric: tabular-nums; }
.stable .sc .from { font-size: 15px; font-weight: 600; color: var(--ink2); min-width: 0; }
.stable .sc b { font-size: 16px; font-weight: 700; color: var(--ink); min-width: 0; }
.stable .sc .tot { font-size: 14px; font-weight: 600; color: var(--mute); }
.slider input[type=number] { font-size: 16px; font-weight: 700; }

/* Day 1: a small heading, then each row starts with its slider */
.state { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.state .lbl { grid-row: auto; padding: 0; }
.state .slider { grid-column: 1; grid-template-columns: minmax(0, 1fr) 22px 54px 60px 96px; gap: 8px; }
.slider .sn { order: 0; }
@media (max-width: 520px) { .state .slider { grid-template-columns: minmax(0, 1fr) 22px 56px; } .slider .sn { display: none; } .slider .tgt { grid-column: 1 / -1; } }
/* square slider: a thin line like the dividers, a square handle */
.slider input[type=range] { -webkit-appearance: none; appearance: none; height: 18px; background: none; margin: 0; }
.slider input[type=range]::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(var(--acc), var(--acc)) 0 / var(--fill, 50%) 100% no-repeat, var(--line); }
.slider input[type=range]::-moz-range-track { height: 2px; background: var(--line); }
.slider input[type=range]::-moz-range-progress { height: 2px; background: var(--acc); }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; background: var(--acc); border: 2px solid var(--card); outline: 1px solid var(--acc); border-radius: 0; }
.slider input[type=range]::-moz-range-thumb { width: 12px; height: 12px; background: var(--acc); border: 2px solid var(--card); outline: 1px solid var(--acc); border-radius: 0; }

/* city options packed tighter */
#city .row2 { margin: 0; }
#city { display: grid; gap: 8px; }
/* tiles in full colour; queue rows taller, ▲ over ▼ */
.tile:not(.on) img { opacity: 1; }
.qtable td { padding: 7px 8px; font-size: 14px; }
.qtable td.mv { display: table-cell; width: 1%; padding: 2px 4px; }
.qtable td.mv div { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.qtable td.mv button { padding: 1px 8px; font-size: 10px; line-height: 1.2; }
.qtable td.t small { font-size: 11px; color: var(--mute); }
/* shorter tiles: smaller picture, +1 and →5 side by side */
.tile img { width: 52px; height: 46px; }
.tile .acr { margin-top: -8px; }
.tile .tb { flex-wrap: nowrap; gap: 3px; margin-top: 4px; }
.tile .tb button { height: 22px; padding: 0 5px; font-size: 12px; gap: 2px; }
.tile, .tile.on { min-width: 66px; }

/* tiles: the building sits on a green diamond like in the game; click it to queue the next level */
.tiles { gap: 2px; padding-top: 4px; }
.tile, .tile.on { min-width: 64px; }
.tile .pic { position: relative; display: grid; place-items: center; width: 64px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; }
.tile .pic::before { content: ""; position: absolute; width: 40px; height: 40px; top: 10px; transform: rotate(45deg) scaleY(.8); border: 1px solid var(--line);
	background: var(--soft); transition: background .12s, border-color .12s; }
.tile.on .pic::before { background: color-mix(in srgb, var(--acc) 35%, var(--card)); border-color: var(--acc); }
.tile .pic:hover:not(:disabled)::before { background: color-mix(in srgb, var(--acc) 55%, var(--card)); border-color: var(--acc); outline: 2px solid var(--acc); outline-offset: 2px; }
.tile .pic:focus-visible { outline: none; }
.tile .pic:focus-visible::before { outline: 2px solid var(--acc); outline-offset: 2px; }
.tile .pic img { position: relative; width: 56px; height: 50px; object-fit: contain; }
.tile .pic:disabled { cursor: default; }
.tile:not(.full) .pic:disabled img { opacity: .5; }
.tile .tl { display: flex; align-items: center; gap: 2px; margin-top: -6px; position: relative; }
.tile .tl .acr { margin: 0; }
.tile .tm { height: 20px; padding: 0 4px; display: inline-flex; align-items: center; gap: 1px; border: 1px solid var(--acc); background: var(--card); color: var(--acc); border-radius: 2px; font: 700 12px var(--head); cursor: pointer; }
.tile .tm:hover { background: var(--acc); color: var(--acc-ink); }
.bcard .card-head h2 { margin-right: auto; }

/* sidebar brand: small name, "By Tinsky02" under it */
.side-nav .brand { display: flex; align-items: center; gap: 10px; }
.side-nav .brand a { padding: 0; border: 0; background: none; display: inline; }
.side-nav .brand img { width: 40px; height: 40px; }
.side-nav .wm { display: grid; gap: 2px; font-size: 15px; letter-spacing: .04em; text-transform: lowercase; }
.side-nav .wm a { color: #eeece4; font: inherit; letter-spacing: inherit; text-transform: none; }
.side-nav .by { border: 0; background: none; padding: 0; color: var(--nav-mute); font: 600 12px var(--head); letter-spacing: .04em; text-align: left; text-decoration: underline dotted; cursor: pointer; }
.side-nav .by:hover { color: var(--nav-on); }
.side-nav .ni img { width: 22px; height: 16px; object-fit: contain; display: block; }
.pop-row { display: flex; gap: 6px; margin-top: 8px; }
/* every slider looks the same: thin line, square handle */
#days { -webkit-appearance: none; appearance: none; height: 18px; background: none; margin: 0; }
#days::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(var(--acc), var(--acc)) 0 / var(--fill, 50%) 100% no-repeat, var(--line); }
#days::-moz-range-track { height: 2px; background: var(--line); }
#days::-moz-range-progress { height: 2px; background: var(--acc); }
#days::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; background: var(--acc); border: 2px solid var(--card); outline: 1px solid var(--acc); border-radius: 0; }
#days::-moz-range-thumb { width: 12px; height: 12px; background: var(--acc); border: 2px solid var(--card); outline: 1px solid var(--acc); border-radius: 0; }
.state .slider { grid-template-columns: minmax(0, 1fr) 22px 54px 60px; }
.side-nav .brand { padding: 6px 12px 14px 18px; }
.side-nav .brand .nav-x { position: static; margin-left: auto; flex: none; align-self: center; }
.pop .btn.q { color: var(--ink); background: var(--card); }
.tile .pic::before { width: 46px; height: 46px; top: 8px; }
.qtable td.mv button[hidden] { display: block; visibility: hidden; }
/* both columns resize with the window: left takes ~42% (between 440 and 720px), the chart gets the rest (at least 480px) */
@media (min-width: 1201px) { .calc { grid-template-columns: minmax(440px, clamp(440px, 42%, 720px)) minmax(480px, 1fr); } }

/* the icon in each cell only shows on a phone, where the header row is hidden */
.stable .sc .ci { display: none; }
@media (max-width: 800px) {
	.stable { display: block; min-width: 0 !important; }
	.stable > .sh:not(.sact) { display: none; }
	.stable .srow { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); border-left: 4px solid var(--pc); background: var(--card); margin-bottom: 6px; }
	.stable .srow > div { border-bottom: 0 !important; background: none !important; }
	.stable .srow .sname { grid-column: 1 / -1; border-left: 0 !important; border-bottom: 1px solid var(--line) !important; padding-left: 10px; }
	.stable .srow .sact { position: absolute; right: 16px; margin-top: 2px; }
	.stable .srow { position: relative; }
	.stable .sc { padding: 5px 10px; gap: 5px; }
	.stable .sc .ci { display: inline-block; width: 20px; height: 20px; flex: none; align-self: center; }
	.stable .sc .ci.mk-pop, .stable .sc .ci.mk-mor { width: 20px; height: 16px; }
	.stable .sc.mute { display: none !important; }
	.strip { overflow: visible; }
}

/* top bar: logo › section, always on the left */
.crumbs-h { display: flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.crumbs-h .tb-logo img { width: 30px; height: 30px; display: block; }
.crumbs-h .tb-home { color: var(--mute); text-decoration: none; font-size: .8em; }
.crumbs-h .tb-home:hover { color: var(--acc); }
.crumbs-h .sep { color: var(--mute); font-weight: 400; }
.bar { justify-content: flex-start; }
.bar .top-ctl { margin-left: auto; }

/* chart right edge: the end labels need ~45px, not more */
@media (max-width: 800px) {
	/* compact top area on a phone */
	.bar, body.nav-closed .bar { padding: 8px 52px 8px 12px; gap: 6px 12px; }
	.crumbs-h { font-size: 18px; }
	.crumbs-h .tb-logo img { width: 26px; height: 26px; }
	.bar .top-ctl { margin-left: 0; gap: 6px 12px; width: 100%; }
	.bar .ctl { font-size: 12px; gap: 6px; }
	.bar .ctl.days { flex: 1 1 200px; }
	.bar #days { flex: 1; min-width: 80px; }
	.fileops { width: 100%; }
	.fileops .btn.q { flex: 1; padding: 4px 6px; font-size: 12px; }
	/* top table: the ＋ stays, per day and total on their own lines */
	.stable > .sh.sact { display: flex !important; justify-content: flex-end; border: 0; padding: 0 0 4px; }
	.stable .sc { flex-wrap: wrap; row-gap: 0; }
	.stable .sc .tot { flex-basis: 100%; padding-left: 25px; font-size: 13px; }
	.stable .sname .rl { display: none; }
}
/* diamond: no outline; invisible until built or hovered; slightly rounded like the rest of the app */
.tile .pic::before { border: 0 !important; outline: 0 !important; border-radius: 3px; background: transparent; }
.tile.on .pic::before { background: color-mix(in srgb, var(--acc) 22%, transparent); }
.tile .pic:hover:not(:disabled)::before { background: color-mix(in srgb, var(--acc) 40%, transparent); }
.tile .pic:focus-visible::before { background: color-mix(in srgb, var(--acc) 40%, transparent); }

/* plan actions: one ＋ (copies the plan you are editing), a faint ✕ per plan */
.stable .sh.sact, .stable .sact { justify-content: center; padding: 0; }
.stable .ib.add { width: 28px; height: 28px; border-radius: 3px; }
.stable .ib.x { width: 28px; height: 28px; border: 0; background: none; color: var(--mute); font-size: 13px; opacity: .6; }
.stable .srow:hover .ib.x, .stable .srow.sel .ib.x { opacity: 1; }
.stable .ib.x:hover { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
@media (max-width: 800px) {
	.strip { padding: 8px 8px 0; }
	.stable > .sh.sact { padding: 0 0 6px; }
	.stable .srow .sact { position: absolute; top: 4px; right: 4px; margin: 0; }
	.stable .srow .sname { padding-right: 40px; }
	.stable .srow { margin-bottom: 8px; }
}
@media (max-width: 800px) { .stable > .sh.sact { justify-content: flex-end; padding-right: 4px; } }
.side-nav .ni img { width: 18px; height: 18px; }
/* in-game diamonds behind the buildings: green once built or queued, grey on hover, nothing otherwise */
.tile .pic::before { width: 58px; height: 58px; top: 0; transform: none; border-radius: 0; background: url(/web/icons/diamond-grey.png) center / contain no-repeat; opacity: 0; transition: opacity .12s; }
.tile.on .pic::before { background-image: url(/web/icons/diamond-green.png); opacity: 1; }
.tile .pic:hover:not(:disabled)::before, .tile .pic:focus-visible::before { opacity: 1; background-color: transparent; }
.tile.on .pic:hover:not(:disabled)::before { filter: brightness(1.15); }
.tile .pic { width: 68px; height: 62px; }
.tile .pic::before { width: 70px; height: 70px; top: -4px; left: -1px; }
.tile .pic img { width: 46px; height: 42px; }
.tile, .tile.on { min-width: 70px; }
.tile .pic::before, .tile.on .pic::before { background-color: transparent !important; }

/* ---------- theme: black and yellow ---------- */
:root {
	--bg: #e6e4dd; --card: #f6f5f1; --ink: #16150f; --ink2: #45433a; --mute: #6c695e; --line: #d0cdc3; --soft: #ecEAe3;
	--acc: #1c1b17; --acc-ink: #f0c419; --a: #8a6a00; --b: #3b6fb0; --good: #4d7a18; --bad: #b3261e; --hi: #f0c419;
	--p0: #8a6a00; --p1: #3b6fb0; --p2: #c9447a; --p3: #557d1e; --p4: #6a4fc0;
	--nav: #0d0d0b; --nav-ink: #d9d6cc; --nav-mute: #8a877c; --nav-on: #f0c419;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #0c0c0a; --card: #161614; --ink: #eeece4; --ink2: #c0bdb2; --mute: #88857a; --line: #2d2c27; --soft: #1e1d1a;
		--acc: #f0c419; --acc-ink: #111110; --a: #b58b00; --b: #5b93d6; --good: #8fbf3f; --bad: #e66767; --hi: #f0c419;
		--p0: #b58b00; --p1: #5b93d6; --p2: #d6588c; --p3: #6f9e2a; --p4: #9a7ae0;
		--nav: #070706;
	}
}
:root[data-theme="dark"] {
	--bg: #0c0c0a; --card: #161614; --ink: #eeece4; --ink2: #c0bdb2; --mute: #88857a; --line: #2d2c27; --soft: #1e1d1a;
	--acc: #f0c419; --acc-ink: #111110; --a: #b58b00; --b: #5b93d6; --good: #8fbf3f; --bad: #e66767; --hi: #f0c419;
	--p0: #b58b00; --p1: #5b93d6; --p2: #d6588c; --p3: #6f9e2a; --p4: #9a7ae0;
	--nav: #070706;
}
/* yellow as the marker colour in light mode too: card tops, selected bars */
.card { border-top-color: var(--hi); }
.bar { border-bottom-color: var(--hi); }
.count, .acr { background: var(--nav); color: var(--nav-ink); }
.acr i { color: var(--hi); }

/* top table flush with the edges */
.strip { padding: 0 !important; }
.stable .sname { padding-left: 12px; }

/* dropdowns: no box, a thin chevron */
.crumbs .crumb, .crumbs .cbtn { border: 0; background: none; padding: 4px 4px; font: 600 14px var(--head); letter-spacing: .03em; }
.crumbs .crumb:hover { background: var(--soft); }
.crumbs .caret { display: inline-block; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); font-size: 0; color: var(--mute); margin-left: 4px; }
.tile.on .pic::before { background-image: url(/web/icons/diamond-yellow.png); }
.qtable td { padding: 7px 5px; } .qtable th { padding: 4px 5px; } .qtable th.rc, .qtable td.rc { min-width: 40px; }

/* queue: disabled arrows stay as faint outlines; trash right by the heading */
.qtable td.mv button:disabled { opacity: .25; visibility: visible; }
.qhead .clr { margin-left: 4px; width: 26px; height: 24px; }
.qtable td.t small { font-size: 11px; }
/* build timeline between the tiles and the queue table */
.gantt { margin: 6px 0 10px; }
.g-bars { position: relative; height: 26px; background: var(--soft); border-radius: 2px; }
.g-bar { position: absolute; top: 3px; bottom: 3px; background: var(--acc); color: var(--acc-ink); border-right: 2px solid var(--card); overflow: hidden; border-radius: 2px; }
.g-bar span { display: block; padding: 0 4px; font: 700 11px/20px var(--head); white-space: nowrap; }
.g-axis { position: relative; height: 16px; margin-top: 2px; }
.g-axis span { position: absolute; transform: translateX(-50%); font: 600 11px var(--head); color: var(--mute); white-space: nowrap; }
.g-axis span:first-child { transform: none; }
.g-axis .g-end { color: var(--ink); font-weight: 700; }
.g-axis .g-end::before { content: "done "; font-weight: 600; color: var(--mute); }

/* ---------- CoN-style: blue-slate panels, yellow highlights ---------- */
:root { --bg: #e3e7ec; --card: #f5f7f9; --ink: #121821; --ink2: #3d4855; --mute: #66717e; --line: #cbd3dc; --soft: #e9edf2; --nav: #0f1620; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) { --bg: #0b1017; --card: #131b25; --ink: #e9eef4; --ink2: #b7c2ce; --mute: #7f8b98; --line: #243241; --soft: #1a2430; --nav: #080c12; }
}
:root[data-theme="dark"] { --bg: #0b1017; --card: #131b25; --ink: #e9eef4; --ink2: #b7c2ce; --mute: #7f8b98; --line: #243241; --soft: #1a2430; --nav: #080c12; }

/* every tile has its diamond: grey = not built, blue = built or queued */
.tile .pic::before { opacity: 1 !important; background-image: url(/web/icons/diamond-grey.png) !important; filter: none; }
.tile.on .pic::before { background-image: url(/web/icons/diamond-blue.png) !important; }
.tile .pic:hover:not(:disabled)::before { filter: brightness(1.2) !important; }

/* one logo: the top bar shows it only when the sidebar is hidden */
.crumbs-h .tb-logo { display: none; }
body.nav-closed .crumbs-h .tb-logo { display: block; }
@media (max-width: 800px) { .crumbs-h .tb-logo { display: block; } }

/* gantt: the end label sits at the right edge, not past it */
.g-axis .g-end { transform: translateX(-100%); }
.g-axis span:nth-last-child(2) { opacity: var(--last-tick, 1); }

/* sidebar icon in the same yellow as the active item */
.ni-city { display: block; width: 18px; height: 18px; background: var(--nav-on); -webkit-mask: url(/web/icons/city.png) center / contain no-repeat; mask: url(/web/icons/city.png) center / contain no-repeat; }
/* one plan: no colour bar or tint, and "＋ Compare" as a quiet button */
.stable .srow.solo .sname { border-left: 0 !important; padding-left: 12px; }
.stable .srow.solo > div { background: var(--card) !important; }
.stable .ib.add { width: auto; min-width: 28px; padding: 0 8px; white-space: nowrap; font: 700 13px var(--head); letter-spacing: .04em; text-transform: uppercase; }
/* dark mode: dividers you can see */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --line: #34465a; --soft: #1c2733; } }
:root[data-theme="dark"] { --line: #34465a; --soft: #1c2733; }
/* tighter buttons everywhere */
.btn { padding: 4px 10px; font-size: 13px; }
.btn.q, .fileops .btn.q { padding: 3px 8px; font-size: 12px; }
.seg button { padding: 3px 9px; font-size: 12px; gap: 4px; }
.seg.icons button { width: 32px; height: 28px; }
.seg.icons .ri { width: 20px; height: 20px; }
.res button { padding: 3px 6px; }
.tgl { padding: 3px 8px; font-size: 13px; }
.ib { width: 24px; height: 24px; }
.stable .sh.sact, .stable .sact { padding: 0 8px; justify-content: flex-end; }
/* selected = yellow outline and text, no fill; hover = a light wash */
.seg button[aria-pressed="true"] { background: none; color: var(--hi); box-shadow: inset 0 0 0 1.5px var(--hi); }
:root:not([data-theme="dark"]) .seg button[aria-pressed="true"] { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg button[aria-pressed="true"] { color: var(--hi); } }
.seg button:not([aria-pressed="true"]):hover, .res button:not([aria-pressed="true"]):hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.res button[aria-pressed="true"] { background: none; border-color: var(--hi); box-shadow: inset 0 0 0 1px var(--hi); }
/* tiles: "→ max" in white, building sits higher on its diamond */
.tile .tm { border-color: var(--ink2); color: var(--ink); background: none; }
.tile .tm:hover { background: var(--ink); color: var(--card); }
.tile .pic img { transform: translateY(-5px); }
/* top area: the bar keeps a plain divider; the plan table is its own card like the others */
.bar { border-bottom: 1px solid var(--line) !important; }
.strip { padding: 12px 12px 0 !important; }
.strip .stable { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--hi); border-radius: 2px; }
.stable .sh { background: none; }
@media (max-width: 800px) { .strip { padding: 8px 8px 0 !important; } .strip .stable { background: none; border: 0; } }
.stable .ib.add { background: none; border: 1.5px solid var(--hi); color: var(--hi); } .stable .ib.add:hover { background: color-mix(in srgb, var(--hi) 15%, transparent); color: var(--hi); } :root:not([data-theme="dark"]) .stable .ib.add { color: var(--ink); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stable .ib.add { color: var(--hi); } }

/* header: just the page name; speed and look-ahead next to it, plan buttons on the right */
.crumbs-h { font-size: 18px; }
.bar .top-ctl { margin-left: 16px; }
/* Day 1: icon, name and value first, slider after */
.state .slider { grid-template-columns: 22px 54px 64px minmax(0, 1fr) 0; }
@media (max-width: 520px) { .state .slider { grid-template-columns: 22px 60px minmax(0, 1fr) 0; } }

/* labels that explain themselves: dotted underline, click to read */
.tt { text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--mute); cursor: help; }
.tt:hover { color: var(--hi); text-decoration-color: currentColor; }
/* checkboxes: no box around them, the label is plain text */
.tgl-wrap { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
.tgl { border: 0 !important; background: none !important; box-shadow: none !important; padding: 2px 0 !important; }
.tgl-wrap .tt { font-size: 14px; }
/* every divider in the city card dashed, like the one under the name */
#city .state { border-top: 1px dashed var(--line); }

/* name: the input is as wide as the name, with a pencil right after it */
.p-head .nm { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; min-width: 0; }
.p-head .nm input { flex: none; min-width: 0; width: auto; max-width: 100%; }
.p-head .pen { border: 0; background: none; color: var(--mute); }
.p-head .pen:hover { color: var(--hi); }
/* dashed divider between the building tiles and the queue */
.bcard .qhead { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 12px; }

/* timeline end: the day the queue is done, easy to spot */
.g-axis { height: 20px; }
.g-axis .g-end { font-size: 13px; color: var(--hi); background: var(--card); padding-left: 6px; }
:root:not([data-theme="dark"]) .g-axis .g-end { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g-axis .g-end { color: var(--hi); } }
.g-axis .g-end::before { content: "done day "; }
/* the queue list scrolls on its own, at most a screen tall; header and total stay put */
.bcard .scroll { max-height: calc(100vh - 140px); overflow: auto; }
.qtable thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
.qtable tfoot td { position: sticky; bottom: 0; z-index: 1; }
/* acronym always centred under its diamond; "→5" hangs off its right side */
.tile .tl { position: relative; justify-content: center; }
.tile .tl .tm { position: absolute; left: calc(100% + 3px); top: 0; }
@media (max-width: 800px) { .bcard .scroll { max-height: none; } }

/* timeline: day labels above and below, a faint line at every day, a yellow line where the queue is done */
.g-axis.top { margin: 0 0 2px; }
.g-axis.top .g-end::before { content: ""; }
.g-axis.top .g-end { font-size: 11px; }
.g-bars { height: 30px; }
.g-day { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); z-index: 0; }
.g-bar { z-index: 1; }
.g-done { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--hi); z-index: 2; transform: translateX(-1px); }
.g-day { z-index: 2; background: color-mix(in srgb, var(--card) 55%, transparent); }
/* brand name in capitals; active page = yellow bar and text, no fill */
.side-nav .wm { text-transform: uppercase; letter-spacing: .08em; }
.side-nav .wm .by { text-transform: none; }
.side-nav a[aria-current="page"] { background: none; color: var(--nav-on); }

.clist .csearch { position: sticky; top: 0; width: 100%; padding: 6px 8px; border: 0; border-bottom: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; outline: none; z-index: 1; }
.clist .csearch:focus { border-bottom-color: var(--hi); }
.clist [hidden] { display: none; }
.bar .top-ctl { margin-left: auto; }
.bar .fileops { margin-left: 16px; }
@media (max-width: 800px) { .bar .fileops { margin-left: 0; } }

/* contact card */
.contact { display: grid; gap: 2px; padding-right: 18px; }
.contact .c-by { font: 600 11px var(--head); text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.contact .c-name { font: 700 20px var(--head); letter-spacing: .03em; color: var(--hi); }
.contact .c-user { font: 700 16px var(--head); letter-spacing: .03em; margin-top: 2px; }
.pop-row { margin-top: 10px; }
.pop .btn.q { background: none; color: inherit; border: 1px solid currentColor; padding: 5px 10px; font-size: 12px; text-decoration: none; }
.pop .btn.q:hover { background: rgb(255 255 255 / .1); }
.pop .btn.q.c-open { background: var(--hi); border-color: var(--hi); color: #111; }
.pop .btn.q.c-open:hover { filter: brightness(1.1); }
/* queue heading: count and clear sit together on the right, same size */
.qhead h3 { margin-right: auto !important; }
.qhead .count, .qhead .clr { width: 26px; min-width: 26px; height: 26px; padding: 0; margin: 0; display: inline-grid; place-items: center; border-radius: 2px; font-size: 13px; }
.qhead .clr { border: 1px solid var(--line); }