:root {
  --ink: #16181d;
  --ink-hover: #3a3e48;
  --on-ink: #ffffff;
  --muted: #646a77;
  --line: #e6e7eb;
  --line-strong: #d2d5dc;
  --line-hover: #9da3af;
  --ground: #f6f6f7;
  --panel: #ffffff;
  --hover: #f3f4f6;
  --stage: #e9ecf1;
  --overlay: #d73f3f;
  --no: rgba(255, 255, 255, 0.05);
  --single: rgba(46, 160, 67, 0.55);
  --multiple: rgba(255, 221, 0, 0.6);
  --reached: #2ea043;
  --warning: #9a5b00;
  --text: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 var(--text);
  color: var(--ink);
  background: var(--ground);
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  padding: 12px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

h1 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 18px; }
h1 .logo { display: flex; }
h2 { margin: 0 0 8px; font-size: 15px; }
a { color: var(--ink); }
code { font-family: var(--mono); }

header nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; }
header nav a { color: var(--muted); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; }
header nav a:hover { color: var(--ink); }
header nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.menu-button { display: none; padding: 6px; color: var(--ink); background: none; border: 0; cursor: pointer; }

label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
fieldset { display: flex; flex-direction: column; align-items: start; gap: 6px; margin: 0; padding: 0; border: 0; }
legend { padding: 0; margin-bottom: 4px; font-size: 13px; color: var(--muted); }
input, select, textarea, button { font: inherit; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 6px; }
input, select, textarea { color: var(--ink); background: var(--panel); }
textarea { resize: vertical; }
input[type="radio"], input[type="range"] { accent-color: var(--ink); }

button { background: var(--ink); color: var(--on-ink); border-color: var(--ink); font-weight: 500; cursor: pointer; }
button:where(:hover:not(:disabled)) { background: var(--ink-hover); border-color: var(--ink-hover); }
button.secondary { background: var(--panel); color: var(--ink); border-color: var(--line-strong); }
button.secondary:where(:hover:not(:disabled)) { background: var(--hover); border-color: var(--line-hover); }
button.link { align-self: center; padding: 0; border: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
button.link:where(:hover:not(:disabled)) { background: none; color: var(--ink); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

fieldset.choices { flex-direction: row; gap: 0; }
.choices label { position: relative; flex-direction: row; padding: 6px 12px; margin-left: -1px; font-size: 15px; color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); cursor: pointer; }
.choices label:first-of-type { margin-left: 0; border-radius: 6px 0 0 6px; }
.choices label:last-of-type { border-radius: 0 6px 6px 0; }
.choices label:hover { background: var(--hover); }
.choices label:has(input:checked) { color: var(--on-ink); background: var(--ink); border-color: var(--ink); }
.choices label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.choices label:has(input:disabled) { opacity: 0.4; cursor: not-allowed; }
.choices input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

/* Setup card: covers the work area until something loads, and again while it is changed. */
main { position: relative; flex: 1; display: grid; grid-template-columns: 1fr 320px; min-height: 0; }
#setup { position: absolute; inset: 0; z-index: 10; display: flex; padding: 24px 16px; overflow-y: auto; background: var(--ground); }
body.loaded:not(.editing) #setup { display: none; }
body.editing #setup { background: color-mix(in srgb, var(--ground) 85%, transparent); backdrop-filter: blur(4px); }
.card { margin: auto; width: min(440px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgb(22 24 29 / 0.04), 0 12px 32px rgb(22 24 29 / 0.08); }
.card:has(#image-inputs) { width: min(600px, 100%); }
.card h2 { margin: 0; font-size: 20px; }
.card label input, .card label select { width: 100%; }
.card .actions { display: flex; gap: 8px; }
.card .actions button[type="submit"] { flex: 1; padding-block: 8px; }
body:not(.loaded) #cancel { display: none; }
#setup-status { margin: 0; font-size: 14px; color: var(--muted); }
#setup-status:empty { display: none; }

#summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
#summary-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
#summary button { flex: none; padding: 4px 10px; font-size: 14px; }
body:not(.loaded) #summary { display: none; }

#map { min-height: 300px; }

aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  overflow-y: auto;
  background: var(--panel);
  border-left: 1px solid var(--line);
}
aside > button { align-self: stretch; }
aside label input:not([type="radio"]) { width: 100%; }

#status { margin: 0; color: var(--muted); }
#status:empty { display: none; }
.hint { margin: 0; font-size: 13px; color: var(--muted); }
#status::before, #setup-status::before { content: ""; display: none; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; border: 2px solid var(--line-strong); border-top-color: var(--ink); border-radius: 50%; animation: spin 0.8s linear infinite; }
body.working #status::before, body.working #setup-status::before { display: inline-block; }
.map-loading { position: absolute; left: 10px; top: 10px; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 13px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; pointer-events: none; }
.map-loading[hidden] { display: none; }
.map-loading::before { content: ""; width: 12px; height: 12px; border: 2px solid var(--line-strong); border-top-color: var(--ink); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#details:not([hidden]) { margin: 0; display: grid; gap: 4px; }
#details dt { font-size: 13px; color: var(--muted); }
#details dd { margin: 0 0 8px; overflow-wrap: anywhere; }
#details code { font-size: 12px; }
#image-list { margin: 0; padding-left: 20px; }
#image-list button.link { text-align: left; }
#image-inputs { display: flex; flex-direction: column; gap: 6px; align-self: stretch; }
.image-row { display: flex; gap: 6px; }
.image-row input { flex: 1; min-width: 0; }

/* The screen editor covers the map with the tile as large as the window allows, and the side panel stays usable. */
#editor { position: absolute; grid-column: 1 / 2; grid-row: 1 / 2; inset: 0; z-index: 5; display: flex; padding: 16px; overflow-y: auto; background: color-mix(in srgb, var(--ground) 80%, transparent); }
#editor[hidden] { display: none; }
.editor-card { margin: auto; display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgb(22 24 29 / 0.12); }
.editor-card h2 { margin: 0; font-size: 18px; }
.editor-card .actions { display: flex; gap: 8px; }
.editor-card .actions button { flex: 1; }
#tile { position: relative; width: min(512px, calc(100svh - 280px)); min-width: 280px; max-width: 100%; aspect-ratio: 1; background: var(--line); }
#tile-image { width: 100%; height: 100%; display: block; image-rendering: auto; }
#cells { position: absolute; inset: 0; display: grid; }
.cell { border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 0; padding: 0; color: transparent; }
.answer-0 { background: var(--no); }
.answer-1 { background: var(--single); }
.answer-2 { background: var(--multiple); }
#scenario-list { margin: 0; padding-left: 20px; }
#scenario-list li { cursor: pointer; }
#scenario-list li.active { font-weight: 600; }

.legend { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--line-strong); margin-right: 4px; }
.swatch.answer-0 { background: #fff; }
.swatch.cell-single { background: rgba(215, 63, 63, 0.2); border-color: var(--overlay); }
.swatch.cell-multiple { background: rgba(215, 63, 63, 0.55); border-color: var(--overlay); }

.maplibregl-popup-close-button { color: var(--ink); padding: 0 6px; }
.maplibregl-popup-content table { border-collapse: collapse; font-size: 13px; }
.maplibregl-popup-content td { padding: 1px 8px 1px 0; vertical-align: top; }
.maplibregl-popup-content td:first-child { white-space: nowrap; }
.maplibregl-popup-content td + td { overflow-wrap: anywhere; }

#stage-area { display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; gap: 8px; min-height: 300px; padding: 12px; background: var(--stage); }
#stage { grid-row: 2; position: relative; height: 100%; aspect-ratio: 1; max-width: 100%; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 4px; }
#box-canvas { cursor: crosshair; touch-action: none; }
#stage #draw { position: absolute; top: 8px; right: 8px; }
#stage #draw[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
#stage #draw[aria-pressed="true"]:where(:hover:not(:disabled)) { background: var(--ink-hover); border-color: var(--ink-hover); }
#tile-bar { display: flex; flex-direction: column; gap: 6px; }
#tile-bar p { margin: 0; font-size: 13px; }
#tile-bar #dataset-count { font-size: 15px; font-weight: 700; }
:is(#tile-bar, #target-summary) :is(#target-track, #spread-track) { display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
:is(#tile-bar, #target-summary) :is(#target-bar, #spread-bar) { display: block; height: 100%; width: 0; background: var(--ink); transition: width 0.2s; }
:is(#tile-bar, #target-summary) #target-bar.reached { background: var(--reached); }
#tile-id { font-family: var(--mono); font-size: 12px; }
#tile-bar div { display: flex; gap: 8px; }
#what-to-label { align-items: stretch; gap: 12px; }
#what-to-label legend { margin-bottom: 12px; font-size: 15px; font-weight: 600; color: var(--ink); }
#value-choices { flex-wrap: wrap; align-items: center; justify-content: center; max-width: 100%; }
#value-choices[hidden] { display: none; }
#value-choices legend { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }
#value-choices .attribute-name { margin-right: 10px; font-size: 13px; color: var(--muted); }
#value-choices label { align-items: center; min-height: 44px; padding: 8px 14px; }
#value-choices kbd { margin-right: 8px; font: 12px var(--mono); opacity: 0.7; }
#value-choices .swatch { width: 14px; height: 14px; margin-right: 8px; border-radius: 3px; }
#tile-bar button { flex: 1; }
body.working #tile-canvas { opacity: 0.6; }

/* The tile and its controls sit together in the middle, with the tile as tall as the screen allows. */
@media (min-width: 801px) {
  main:has(#stage-area) { display: flex; justify-content: center; gap: 24px; padding: 16px; background: var(--stage); }
  main:has(#stage-area) #stage-area { padding: 0; }
  main:has(#stage-area) aside { flex: none; width: 320px; align-self: center; max-height: 100%; padding: 20px; border: 1px solid var(--line); border-radius: 12px; }
}

@media (max-width: 800px) {
  body { height: auto; }
  header { flex-wrap: wrap; padding: 8px 16px; }
  .menu-button { display: flex; }
  header nav { display: none; width: 100%; flex-direction: column; gap: 0; }
  header nav.open { display: flex; }
  header nav a { padding: 10px 0; border-bottom: 1px solid var(--line); }
  header nav a:last-child { border-bottom: 0; }
  header nav a[aria-current="page"] { font-weight: 600; border-bottom-color: var(--line); }
  main { grid-template-columns: 1fr; }
  body:not(.loaded) main, body.editing main { min-height: calc(100svh - 51px); }
  .card { margin: 0 auto auto; padding: 20px; }
  #map { height: 50vh; }
  #editor { position: fixed; inset: 0; z-index: 20; padding: 8px; }
  .editor-card { width: 100%; padding: 12px; }
  #tile { width: 100%; min-width: 0; }
  aside { border-left: 0; border-top: 1px solid var(--line); }
  #stage-area { grid-template-rows: auto auto; grid-template-columns: 100%; gap: 0; padding: 0; }
  #stage { width: 100%; height: auto; }
  body.loaded:not(.editing):has(#tile-bar) { padding-bottom: 220px; }
  body.loaded:not(.editing):has(#value-choices:not([hidden])) { padding-bottom: 280px; }
  #value-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; }
  #value-choices .attribute-name { grid-column: 1 / -1; margin: 0 0 4px; }
  #value-choices label { min-height: 40px; padding: 6px 8px; margin: 0; border-radius: 0; overflow-wrap: anywhere; }
  body:not(.loaded) #tile-bar, body.editing #tile-bar { display: none; }
  #tile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1; padding: 8px 16px; background: var(--panel); border-top: 1px solid var(--line); }
}

body.loaded .centre-mark::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: 2; width: 20px; height: 20px; transform: translate(-50%, -50%); border: 2px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6); pointer-events: none; }
#volunteer-view:not([hidden]) { margin: 0; display: flex; flex-direction: column; gap: 6px; }
#volunteer-view figcaption { font-size: 13px; color: var(--muted); }
#copy-tile-url { display: block; margin-top: 6px; }
#view-tile { position: relative; width: 100%; aspect-ratio: 1; background: var(--line); }
#view-image { width: 100%; height: 100%; display: block; }
#view-cells { position: absolute; inset: 0; display: grid; }
#view-cells span { border: 1px solid rgba(255, 255, 255, 0.8); }
/* Folded sections: a summary row with a chevron that turns when the section opens. */
details > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; border-radius: 6px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 3px auto; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s; }
details[open] > summary::after { margin-bottom: -3px; transform: rotate(-135deg); }
#messages { padding-top: 12px; border-top: 1px solid var(--line); }
#messages > summary { font-weight: 600; }
.messages-body { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
#message-list { display: flex; flex-direction: column; gap: 8px; }
.message { background: var(--panel); border: 1px solid var(--line-strong); border-radius: 6px; }
.message > summary { padding: 8px 10px; font-weight: 500; }
.message > summary:hover { background: var(--hover); }
.message[open] > summary { border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; }
.message > summary::after { margin-left: 0; }
.message-icon { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--muted); }
.message-body { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.message-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.field-row { display: flex; gap: 6px; align-items: start; }
.field-row input, .field-row textarea { flex: 1; min-width: 0; }
aside .actions { display: flex; gap: 8px; }
aside .actions button { flex: 1; }
.problems { margin: 0; color: var(--overlay); font-size: 13px; }
.problems:empty { display: none; }

/* Labels checker */
#checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
#checks:empty { display: none; }
#checks li { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 6px; font-size: 14px; }
#checks li.pass { border-left-color: var(--reached); }
#checks li.fail { border-left-color: var(--overlay); }
#checks li.warn { border-left-color: var(--warning); }
#checks .verdict { min-width: 5.5em; font-size: 12px; font-weight: 700; }
#checks li.pass .verdict { color: var(--reached); }
#checks li.fail .verdict { color: var(--overlay); }
#checks li.warn .verdict { color: var(--warning); }
#checks strong { font-weight: 500; }
#checks .detail { grid-column: 2; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
#counts { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
#counts caption { text-align: left; font-size: 13px; color: var(--muted); padding-bottom: 4px; }
#counts th, #counts td { padding: 4px; border-bottom: 1px solid var(--line); text-align: left; }
#counts td:not(:first-child), #counts th:not(:first-child) { text-align: right; white-space: nowrap; }
#counts td:first-child { overflow-wrap: anywhere; }
#counts:has(tbody:empty) { display: none; }
#counts:not(.with-lines) .length { display: none; }
#counts:not(.with-tiles) .tiles { display: none; }
#target-summary { display: flex; flex-direction: column; gap: 6px; }
#target-summary[hidden] { display: none; }
:is(#target-line, #spread-line) { margin: 0; font-size: 15px; font-weight: 700; }
#spread-summary { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
#spread-summary[hidden] { display: none; }
#target-summary #spread-bar { background: var(--overlay); }
#target-summary #spread-bar.warn { background: var(--warning); }
#target-summary #spread-bar.reached { background: var(--reached); }
#type-choice[hidden] { display: none; }