/* ------------------------------------------------------------------
   Four ways to Florida: the two figures. Loads after post.css.
   Colour roles follow STYLE-GUIDE.md "Canvas scenes": cyan is the map and
   everything the search has finished with, volt is the search's frontier
   and the route it settles on, hot is the destination and anything that
   overpaid. The canvases themselves are drawn by florida.js.
   ------------------------------------------------------------------ */

/* Breaks out of the 720px reading column to the site's content width. The
   100vw includes a desktop scrollbar, so the figure sits a few pixels right
   of centre there; not worth JS to fix. */
.fig-wide {
  --fw: min(1160px, calc(100vw - var(--gutter) * 2));
  width: var(--fw);
  margin-left: calc((100% - var(--fw)) / 2);
}

.fig { --c: 22px; margin-top: 2.6em; margin-bottom: 2.6em; }
/* Otherwise the 1px margins on the bar and caption collapse through the
   figure, and their fills paint over the chamfer's border line. */
.fig { display: flow-root; }

/* The race is four maps in a 2x2 grid; capped by viewport height so all
   four fit under the HUD on a laptop screen and the finish order (which is
   the point) happens in view. Floor of 760px keeps two columns readable. */
#race { --fw: min(1160px, calc(100vw - var(--gutter) * 2), max(760px, calc(154vh - 400px))); }

/* Same bar as the terminal's: the figure is a machine, not an illustration. */
.fig-bar {
  display: flex; align-items: center; gap: 14px;
  margin: 1px 1px 0;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-2);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.fig-id { color: #000; background: var(--volt); padding: 5px 7px; font-weight: 700; letter-spacing: .06em; }
.fig-title { color: var(--text); }
.fig-status { margin-left: auto; padding-right: 10px; display: inline-flex; align-items: center; gap: 9px; }
.fig-status.live { color: var(--volt); }
.fig-status.live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--volt); box-shadow: 0 0 10px var(--volt);
  animation: pulse 1.6s ease-in-out infinite;
}

/* ---------- Controls ---------- */
.fig-ctrl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin: 0 1px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
}
.fig-ctrl--sub { padding-top: 12px; padding-bottom: 12px; }
.fig-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto; }
.fig-actions .btn { padding: 13px 18px; }

.fig-field {
  display: flex; align-items: center; gap: 10px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.fig-field select {
  appearance: none; -webkit-appearance: none;
  min-width: 0; max-width: 220px;
  padding: 10px 30px 10px 12px;
  border: 1px solid var(--line-2); border-radius: 0;
  /* A plain triangle drawn with two hard-stopped gradients in one colour:
     not a gradient between neons, just a shape. */
  background:
    linear-gradient(45deg, transparent 50%, var(--volt) 50%) no-repeat calc(100% - 16px) 50% / 5px 5px,
    linear-gradient(-45deg, transparent 50%, var(--volt) 50%) no-repeat calc(100% - 11px) 50% / 5px 5px,
    var(--bg-2);
  color: var(--text);
  font: 500 12px/1.2 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color .12s;
}
.fig-field select:hover { border-color: var(--volt); }
.fig-field select option { background: var(--panel); color: var(--text); }

.fig-btn, .seg-btn {
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--muted);
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.fig-btn:hover, .seg-btn:hover { color: var(--volt); border-color: var(--volt); }
.fig-btn:disabled { color: var(--dim); border-color: var(--line-2); cursor: default; }

/* Segmented radio row: buttons share borders, the checked one floods volt. */
.seg { display: flex; flex-wrap: wrap; }
.seg-btn + .seg-btn { margin-left: -1px; }
.seg-btn[aria-checked="true"] { position: relative; z-index: 1; background: var(--volt); border-color: var(--volt); color: #000; }
/* Neighbours overlap by 1px; lift the focused one so its ring isn't cut. */
.seg-btn:focus-visible, .fig-btn:focus-visible { position: relative; z-index: 2; }

/* ---------- Race boards ---------- */
.boards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 1px;
  background: var(--line-2);  /* shows through the gap as 1px dividers */
}
.board { position: relative; background: var(--screen); container-type: inline-size; }
.board-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 10px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.board-head > span { white-space: nowrap; }
/* Hot text stays at 12px and up (STYLE-GUIDE contrast table). */
.board-idx { color: var(--hot); font-weight: 700; font-size: 12px; }
.board-name { color: var(--text); font-weight: 700; }
.board-tag { color: var(--muted); }
/* Keyed to the board's own width, not the viewport: the tag only fits
   when a board is wider than about 470px, in one column or two. */
@container (max-width: 470px) {
  .board-tag { display: none; }
  .board-head { gap: 10px; padding-left: 12px; padding-right: 12px; }
}
.board-status { margin-left: auto; }
.board-status.run { color: var(--volt); }
.board-status.done { color: var(--volt); }
.board-status.fail { color: var(--hot); }

.board-screen {
  position: relative;
  /* Height follows the grid's aspect; florida.js sets --ar from USMap. */
  aspect-ratio: var(--ar, 1.6);
  cursor: crosshair;
  overflow: hidden;
}
.board-screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.board-screen::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0, 0, 0, .28) 3px 4px);
}

.board-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line);
}
.board-stats div { padding: 10px 16px 12px; }
.board-stats div + div { border-left: 1px solid var(--line); }
.board-stats dt {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.board-stats dd {
  margin: 7px 0 0;
  font: 700 17px/1 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.board-stats dd.best { color: var(--volt); }
.board-stats dd.over { color: var(--hot); }

.board.flash { animation: board-flash .5s steps(2) 1; }
@keyframes board-flash { 50% { filter: brightness(1.7); } }

/* ---------- Caption ---------- */
.fig-cap {
  margin: 0 1px 1px;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--line-2);
  font-size: 15px; line-height: 1.55;
  color: var(--muted);
}
.fig-cap p { margin: 0; }
.fig-cap p + p { margin-top: 6px; }
#race-summary { color: var(--text); }
.fig-hint {
  font: 500 11px/1.6 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- Sandbox ---------- */
.sb-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  margin: 0 1px 1px;
}
.sb-screen {
  position: relative;
  background: var(--screen);
  border-right: 1px solid var(--line-2);
  touch-action: none;  /* a drag paints; it must not scroll the page */
  cursor: crosshair;
}
.sb-screen canvas { display: block; width: 100%; height: auto; }
.sb-screen::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0, 0, 0, .28) 3px 4px);
}
.sb-screen.drag-start, .sb-screen.drag-goal { cursor: grabbing; }

.sb-side { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.sb-readout {
  margin: 0;
  min-height: 3.2em;
  font: 500 11px/1.6 var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.sb-readout b { color: var(--text); font-weight: 700; }

.sb-about { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

.sb-table { width: 100%; border-collapse: collapse; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.sb-table th {
  padding: 0 0 9px; text-align: right;
  font-weight: 500; font-size: 10px; letter-spacing: .14em;
  color: var(--muted);
  border-bottom: 1px solid var(--line-2);
}
.sb-table th:first-child, .sb-table td:first-child { text-align: left; }
.sb-table td {
  padding: 10px 0; text-align: right;
  font-size: 12px;
  border-bottom: 1px dashed var(--line);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sb-table tr { cursor: pointer; }
.sb-table tbody tr:hover td { color: var(--volt); }
.sb-table tr.sel td:first-child { color: var(--volt); }
.sb-table tr.sel td:first-child::before { content: '> '; }
.sb-table td.best { color: var(--volt); }
.sb-table td.over { color: var(--hot); }

.sb-legend {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  margin: auto 0 0;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.sb-legend span { display: inline-flex; align-items: center; gap: 7px; }
.k { display: inline-block; width: 10px; height: 10px; }
.k-start { background: var(--volt); }
.k-goal { background: var(--hot); }
.k-wall { border: 1px solid rgba(34, 227, 238, .6); background: rgba(34, 227, 238, .12); }
.k-mud { background: radial-gradient(circle, rgba(122, 131, 155, .9) 1px, transparent 1.5px) 0 0 / 5px 5px; }
.k-front { border: 1px solid var(--volt); }
.k-path { height: 2px; width: 14px; background: var(--volt); }

/* ---------- Narrow screens ---------- */
/* Side by side, the screen's dark fill would paint over the figure's
   bottom-left cut and border; give the screen the same cut. */
@media (min-width: 1001px) {
  .sb-screen { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
}
@media (max-width: 1000px) {
  .sb-body { grid-template-columns: 1fr; }
  .sb-screen { border-right: 0; border-bottom: 1px solid var(--line-2); }
}
@media (max-width: 760px) {
  .boards { grid-template-columns: 1fr; }
  .fig-actions { margin-left: 0; }
}
@media (max-width: 680px) {
  .fig-bar { padding: 11px 14px; gap: 10px; }
  .fig-ctrl { padding: 12px 14px; }
  .board-stats div { padding: 9px 10px 11px; }
  .board-stats dd { font-size: 15px; }
  /* Both selects span the row and start at the same x, so long names fit. */
  .fig-field { width: 100%; }
  .fig-field > span { flex: none; width: 4.5em; }
  .fig-field select { flex: 1; min-width: 0; max-width: none; }
}

/* Without JS (html.js is set in <head>) the controls and screens are dead;
   leave the bar, the noscript line and the prose. */
html:not(.js) .fig-ctrl, html:not(.js) .boards, html:not(.js) .sb-body,
html:not(.js) .fig-status, html:not(.js) .fig-hint, html:not(.js) #race-summary { display: none; }

/* Windows high contrast: keep the canvases on their dark screen (they are
   drawn for it) and mark the checked segment with system colours. */
@media (forced-colors: active) {
  .board, .sb-screen, .k { forced-color-adjust: none; }
  .seg-btn[aria-checked="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}