/* Vector Daily: deliberate route preview, exploration scoring, and accessible debriefs. */
.vector-intro h1 { max-width: 8ch; }
.vector-intro .intro { max-width: 760px; }

.vector-intro-actions,
.vector-actions,
.vector-result-actions,
.vector-tutorial-actions,
.vector-tutorial-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vector-intro-actions { margin-top: 18px; }
.vector-intro-actions .button { min-height: 42px; }
.vector-sections { padding-top: 8px; }
.vector-game-panel { display: grid; gap: 18px; }

.vector-game-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.vector-game-heading h2,
.vector-game-heading p { margin: 0; }
.vector-game-heading h2 { margin-top: 3px; font-size: clamp(1.45rem, 3vw, 2rem); }
.vector-game-heading > div > p:last-child { margin-top: 5px; color: var(--muted); }

.vector-kicker {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vector-heading-meta {
  display: flex;
  max-width: 470px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.vector-heading-meta span,
.vector-attempt-badge {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, var(--panel-strong));
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 780;
}

.vector-difficulties {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.vector-difficulties button {
  display: flex;
  min-width: 0;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-strong) 78%, transparent);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.vector-difficulties button[aria-selected="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, var(--panel-strong));
  box-shadow: inset 0 0 0 1px var(--accent);
}

.vector-difficulties button:focus-visible,
.vector-button:focus-visible,
.vector-plot-button:focus-visible,
.vector-dialog-close:focus-visible,
.vector-tutorial button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 48%, transparent);
  outline-offset: 2px;
}

.vector-difficulties span,
.vector-difficulties strong,
.vector-difficulties small { display: block; }
.vector-difficulties strong { font-size: 0.9rem; }
.vector-difficulties small { margin-top: 3px; color: var(--muted); font-size: 0.69rem; }

.vector-difficulties em {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 60%, transparent);
  color: var(--muted);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 800;
}

html[data-theme="light"] .vector-difficulties small,
html[data-theme="light"] .vector-difficulties em { color: #46534b; }

.vector-difficulties button[data-status="planning"] em { color: var(--accent-2); }
.vector-difficulties button[data-status="solved"] em {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

.vector-game { display: grid; gap: 18px; }

.vector-objective {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, auto);
  align-items: end;
  gap: 18px;
  padding: 17px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 58%),
    color-mix(in srgb, var(--panel-strong) 78%, transparent);
}

.vector-objective h2,
.vector-objective p { margin: 0; }
.vector-objective h2 { margin-top: 4px; font-size: clamp(1.2rem, 2.7vw, 1.72rem); }
.vector-objective > div:first-child > p:last-child { max-width: 660px; margin-top: 7px; color: var(--muted); line-height: 1.48; }

.vector-state-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(78px, auto));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel-strong) 88%, transparent);
}

.vector-state-grid div {
  min-width: 0;
  padding: 10px 11px;
  border-right: 1px solid var(--line);
}

.vector-state-grid div:last-child { border-right: 0; }
.vector-state-grid span,
.vector-state-grid strong { display: block; }
.vector-state-grid span { color: var(--muted); font-size: 0.63rem; font-weight: 750; }
.vector-state-grid strong { margin-top: 3px; color: var(--ink); font-size: 0.9rem; white-space: nowrap; }
.vector-state-grid .vector-score-state { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.vector-state-grid .vector-score-state strong { color: var(--accent); font-size: 1.05rem; }

.vector-play-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(310px, 0.8fr);
  align-items: start;
  gap: 16px;
}

.vector-board-wrap,
.vector-controls,
.vector-result,
.vector-stats {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel-strong) 78%, transparent);
}

.vector-board-wrap { padding: 14px; }

.vector-board-head,
.vector-timeline-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vector-board-head { margin-bottom: 12px; }
.vector-board-head span,
.vector-board-head strong { display: block; }
.vector-board-head > div > span { color: var(--muted); font-size: 0.75rem; font-weight: 740; }
.vector-board-head strong { margin-top: 2px; color: var(--ink); }
.vector-attempt-badge[data-practice="true"] { border-style: dashed; color: var(--accent-2); }

.vector-board {
  --vector-board-size: 6;
  position: relative;
  display: grid;
  overflow: hidden;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  aspect-ratio: 1;
  grid-template-columns: repeat(var(--vector-board-size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--vector-board-size), minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 67%),
    var(--panel-strong);
  isolation: isolate;
}

.vector-cell {
  appearance: none;
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  padding: 0;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: transparent;
  color: var(--muted);
  font: inherit;
}

button.vector-cell[data-option-target] {
  cursor: pointer;
  touch-action: manipulation;
}

button.vector-cell[data-option-target]:hover,
button.vector-cell[data-option-target]:focus-visible {
  z-index: 5;
  outline: 3px solid var(--vector-option-color);
  outline-offset: -3px;
  background: color-mix(in srgb, var(--vector-option-color) 14%, var(--panel-strong));
}

.vector-cell-coordinate {
  position: absolute;
  top: 5px;
  left: 6px;
  font-size: clamp(0.48rem, 1.35vw, 0.63rem);
  font-weight: 760;
  opacity: 0.52;
}

.vector-board:is([data-size="9"], [data-size="11"], [data-size="13"]) .vector-cell-coordinate { display: none; }
.vector-board:is([data-size="9"], [data-size="11"], [data-size="13"]) .vector-cell:is([data-kind], [data-option-target], [data-visited]) .vector-cell-coordinate { display: block; }

.vector-cell-marker {
  position: relative;
  z-index: 3;
  display: grid;
  width: clamp(25px, 6vw, 40px);
  height: clamp(25px, 6vw, 40px);
  place-items: center;
  border-radius: 50%;
  font-size: clamp(0.7rem, 2vw, 0.96rem);
  font-weight: 900;
}

.vector-cell[data-kind="start"] .vector-cell-marker {
  border: 1px dashed color-mix(in srgb, var(--accent) 72%, transparent);
  background: var(--panel-strong);
  color: var(--accent);
}

.vector-cell[data-kind="goal"] .vector-cell-marker {
  border: 3px double var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 12%, var(--panel-strong));
  color: var(--accent-2);
}

.vector-cell[data-visited="true"] .vector-cell-marker {
  border: 2px solid var(--accent);
  background: var(--panel-strong);
  color: var(--accent);
}

.vector-cell[data-current="true"] {
  z-index: 4;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 72%, transparent);
}

.vector-cell[data-current="true"] .vector-cell-marker {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 7px 18px rgba(36, 124, 95, 0.24);
}

.vector-cell[data-preview="true"] {
  z-index: 4;
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 12%, transparent) 0 5px, transparent 5px 10px),
    var(--panel-strong);
  box-shadow: inset 0 0 0 3px var(--accent-2);
}

.vector-cell[data-option-target] { --vector-option-color: var(--accent); }
.vector-cell[data-option-target="B"] { --vector-option-color: var(--accent-2); }
.vector-cell[data-option-target="C"] { --vector-option-color: #4f72b5; }
.vector-cell[data-selected="true"] { --vector-option-color: var(--accent-2); }

.vector-option-target {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 4;
  display: grid;
  width: clamp(25px, 5vw, 35px);
  height: clamp(25px, 5vw, 35px);
  place-items: center;
  border: 2px solid var(--vector-option-color);
  border-radius: 50%;
  background: var(--panel-strong);
  color: var(--vector-option-color);
  font-size: clamp(0.68rem, 1.8vw, 0.84rem);
  font-weight: 900;
  pointer-events: none;
}

.vector-option-target small {
  position: absolute;
  top: 100%;
  left: 50%;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 0.46rem;
  transform: translate(-50%, 1px);
  white-space: nowrap;
}

.vector-forecast-target {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px dotted var(--accent-2);
  border-radius: 50%;
  background: var(--panel-strong);
  color: var(--accent-2);
  font-size: 0.58rem;
  font-weight: 850;
  opacity: 0.72;
}

.vector-map-lines { position: absolute; z-index: 1; inset: 0; pointer-events: none; }

.vector-map-line {
  position: absolute;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 78%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--panel-strong) 64%, transparent);
  transform-origin: left center;
}

.vector-map-line::after {
  position: absolute;
  top: 50%;
  right: -1px;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  color: inherit;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.vector-map-line[data-kind="explored"] {
  height: 2px;
  background: transparent;
  border-top: 2px dotted color-mix(in srgb, var(--muted) 48%, transparent);
  box-shadow: none;
  color: color-mix(in srgb, var(--muted) 48%, transparent);
}

.vector-map-line[data-kind="committed"] { color: var(--accent); }

.vector-map-line[data-kind="preview"] {
  height: 0;
  border-top: 3px dashed var(--accent-2);
  background: transparent;
  box-shadow: none;
  color: var(--accent-2);
}

.vector-map-line[data-kind="forecast"] {
  height: 0;
  border-top: 2px dotted color-mix(in srgb, var(--accent-2) 66%, transparent);
  background: transparent;
  box-shadow: none;
  color: color-mix(in srgb, var(--accent-2) 66%, transparent);
  opacity: 0.7;
}

.vector-map-line[data-kind="candidate"] {
  height: 0;
  border-top: 2px dashed color-mix(in srgb, var(--gv-blue, var(--accent-2)) 30%, transparent);
  background: transparent;
  box-shadow: none;
  color: color-mix(in srgb, var(--gv-blue, var(--accent-2)) 30%, transparent);
  opacity: .72;
}

.vector-map-line[data-kind="candidate"]::after { display: none; }

.vector-board-key {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.69rem;
}

.vector-board-key span { display: inline-flex; align-items: center; gap: 6px; }
.vector-board-key [hidden] { display: none; }
.vector-board-key i { display: block; flex: 0 0 auto; width: 14px; height: 8px; }
.vector-key-current { width: 10px !important; height: 10px !important; border-radius: 50%; background: var(--accent); }
.vector-key-goal { width: 11px !important; height: 11px !important; border: 3px double var(--accent-2); border-radius: 50%; }
.vector-key-route { height: 3px !important; border-radius: 999px; background: var(--accent); }
.vector-key-preview { border-top: 2px dashed var(--accent-2); }
.vector-key-forecast { border-top: 2px dotted var(--accent-2); opacity: 0.7; }
.vector-key-candidate { border-top: 2px dashed color-mix(in srgb, var(--gv-blue, var(--accent-2)) 52%, transparent); }

.vector-timeline-wrap {
  margin-top: 13px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-strong) 82%, transparent);
}

.vector-timeline-heading h3,
.vector-timeline-heading span { margin: 0; }
.vector-timeline-heading h3 { font-size: 0.73rem; letter-spacing: 0.06em; text-transform: uppercase; }
.vector-timeline-heading span { color: var(--muted); font-size: 0.7rem; font-weight: 740; }

.vector-timeline {
  display: flex;
  overflow-x: auto;
  align-items: center;
  gap: 17px;
  margin-top: 9px;
  padding: 1px 1px 4px;
}

.vector-timeline-leg {
  position: relative;
  display: inline-flex;
  min-width: max-content;
  min-height: 34px;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 760;
}

.vector-timeline-leg:not(:last-child)::after {
  position: absolute;
  left: calc(100% + 5px);
  color: var(--muted);
  content: "→";
}

.vector-timeline-leg[data-state="committed"] { border-color: color-mix(in srgb, var(--accent) 46%, var(--line)); color: var(--ink); }
.vector-timeline-leg[data-state="preview"] { border: 2px dashed var(--accent-2); color: var(--accent-2); }
.vector-timeline-leg[data-state="empty"] { min-width: 58px; justify-content: center; border-style: dashed; }
.vector-timeline-leg[data-checked="true"]::before { color: var(--accent); content: "✓"; font-weight: 900; }
.vector-timeline-leg small { color: var(--muted); font-size: 0.61rem; }

.vector-live-status,
.vector-check-result {
  margin: 10px 0 0;
  padding: 10px 11px;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.48;
}

.vector-live-status { min-height: 43px; }
.vector-check-result { border: 1px solid var(--line); border-left-width: 4px; border-radius: 9px; }
.vector-check-result[hidden] { display: none; }
.vector-check-result[data-viable="true"] { border-left-color: var(--accent); }
.vector-check-result[data-viable="false"] { border-left-color: var(--danger, #a9534b); }
.vector-check-result strong { display: block; color: var(--ink); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; }
.vector-check-result span { display: block; margin-top: 2px; }

.vector-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 9px;
}

.vector-button,
.vector-plot-button,
.vector-tutorial-actions button,
.vector-tutorial-choices button {
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-strong);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 760;
  touch-action: manipulation;
}

.vector-button > span { margin-right: 4px; }
.vector-button:hover:not(:disabled),
.vector-tutorial-actions button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.vector-button:disabled,
.vector-plot-button:disabled,
.vector-tutorial button:disabled { cursor: not-allowed; opacity: 0.46; }
.vector-check-button { border-color: color-mix(in srgb, var(--accent-2) 58%, var(--line)); }

.vector-controls { overflow: hidden; }

.vector-controls > summary,
.vector-rules > summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.vector-controls > summary::-webkit-details-marker,
.vector-rules > summary::-webkit-details-marker { display: none; }
.vector-controls > summary::after,
.vector-rules > summary::after { color: var(--accent); content: "+"; font-size: 1.3rem; font-weight: 800; }
.vector-controls[open] > summary::after,
.vector-rules[open] > summary::after { content: "−"; }
.vector-controls > summary strong,
.vector-controls > summary small,
.vector-rules > summary strong,
.vector-rules > summary small { display: block; }
.vector-controls > summary small,
.vector-rules > summary small { margin-top: 2px; color: var(--muted); font-size: 0.7rem; font-weight: 680; }

.vector-controls-body {
  display: grid;
  gap: 13px;
  padding: 0 17px 17px;
}

.vector-controls p { margin: 0; }
.vector-help,
.vector-keyboard-help,
.vector-reach-note { color: var(--muted); font-size: 0.81rem; line-height: 1.48; }
.vector-reach-note { padding: 8px 9px; border: 1px dashed color-mix(in srgb, var(--accent-2) 48%, var(--line)); border-radius: 8px; background: color-mix(in srgb, var(--accent-2) 5%, transparent); font-size: 0.72rem; }
.vector-keyboard-help { padding-top: 2px; font-size: 0.71rem; }
.vector-keyboard-help strong { color: var(--ink); }

.vector-compass {
  display: grid;
  width: 178px;
  margin: 0 auto;
  grid-template-columns: 1fr 28px 1fr;
  grid-template-rows: auto 28px auto;
  place-items: center;
  color: var(--muted);
  font: 760 0.63rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.vector-compass::before,
.vector-compass::after { position: absolute; content: ""; }
.vector-compass-n { grid-area: 1 / 2; white-space: nowrap; }
.vector-compass-w { grid-area: 2 / 1; white-space: nowrap; }
.vector-compass i { grid-area: 2 / 2; color: var(--accent); font-style: normal; }
.vector-compass-e { grid-area: 2 / 3; white-space: nowrap; }
.vector-compass-s { grid-area: 3 / 2; white-space: nowrap; }

.vector-choices { display: grid; gap: 9px; }

.vector-choice {
  --vector-option-color: var(--accent);
  display: grid;
  min-height: 82px;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--vector-option-color) 36%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--vector-option-color) 4%, var(--panel-strong));
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  touch-action: manipulation;
}

.vector-choice[data-option="B"] { --vector-option-color: var(--accent-2); }
.vector-choice[data-option="C"] { --vector-option-color: #4f72b5; }
.vector-choice:hover,
.vector-choice:focus-visible { border-color: var(--vector-option-color); background: color-mix(in srgb, var(--vector-option-color) 9%, var(--panel-strong)); }
.vector-choice:focus-visible { outline: 3px solid color-mix(in srgb, var(--vector-option-color) 34%, transparent); outline-offset: 2px; }
.vector-choice[aria-pressed="true"] {
  border: 2px solid var(--vector-option-color);
  background: color-mix(in srgb, var(--vector-option-color) 12%, var(--panel-strong));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--vector-option-color) 12%, transparent);
}

.vector-choice-arrow {
  display: grid;
  width: 44px;
  height: 52px;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--vector-option-color) 12%, transparent);
  color: var(--vector-option-color);
  font-size: 1.45rem;
  font-weight: 900;
}

.vector-choice-letter {
  display: inline-grid;
  min-width: 23px;
  height: 23px;
  margin-right: 7px;
  place-items: center;
  border: 1px solid var(--vector-option-color);
  border-radius: 50%;
  color: var(--vector-option-color);
  font-size: 0.69rem;
  font-weight: 900;
  vertical-align: middle;
}

.vector-choice strong,
.vector-choice small { display: block; }
.vector-choice strong { font-size: 0.9rem; }
.vector-choice small { margin-top: 4px; color: var(--muted); font-size: 0.7rem; line-height: 1.35; }
.vector-choice-forecast { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px; }
.vector-choice-forecast b { color: var(--ink); font-size: 0.65rem; }
.vector-choice-forecast i { font-size: 0.8rem; font-style: normal; }
.vector-choice-meta { display: grid; justify-items: end; gap: 4px; color: var(--muted); font-size: 0.69rem; font-weight: 760; }
.vector-choice-meta em { color: var(--accent); font-size: 0.59rem; font-style: normal; text-transform: uppercase; }
.vector-choice-meta em[data-new="true"] { color: var(--accent-2); }

.vector-plot-button {
  width: 100%;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.vector-plot-button:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 86%, #000); }

.vector-mobile-action { display: none; }

@media (max-width: 700px) {
  .vector-game-panel { overflow: visible; padding-bottom: 108px; }
  .vector-mobile-action {
    position: fixed;
    z-index: 880;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    display: grid;
    max-width: 660px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-inline: auto;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: color-mix(in srgb, var(--panel-strong) 94%, transparent);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .26);
    backdrop-filter: blur(16px);
  }
  .vector-mobile-action > span { display: grid; min-width: 0; gap: 2px; }
  .vector-mobile-action small { color: var(--muted); font-size: .66rem; text-transform: uppercase; }
  .vector-mobile-action strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vector-mobile-action .button { min-height: 44px; }
}

.vector-result {
  display: grid;
  gap: 17px;
  padding: 18px;
  border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 48%),
    color-mix(in srgb, var(--panel-strong) 90%, transparent);
}
.vector-result[hidden] { display: none; }
.vector-result-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.vector-result h2,
.vector-result p { margin: 0; }
.vector-result h2 { margin-top: 3px; }
.vector-result-header p:not(.vector-kicker) { max-width: 660px; margin-top: 6px; color: var(--muted); line-height: 1.5; }
.vector-result-actions { justify-content: flex-end; }

.vector-scorecard {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
}
.vector-scorecard div { min-width: 0; padding: 11px; border-right: 1px solid var(--line); }
.vector-scorecard div:last-child { border-right: 0; }
.vector-scorecard dt { color: var(--muted); font-size: 0.63rem; font-weight: 730; }
.vector-scorecard dd { margin: 4px 0 0; color: var(--ink); font-size: 0.91rem; font-weight: 850; }
.vector-scorecard .vector-scorecard-total { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.vector-scorecard .vector-scorecard-total dd { color: var(--accent); font-size: 1.08rem; }

.vector-debrief {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.vector-debrief article { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel-strong) 74%, transparent); }
.vector-debrief h3 { margin: 0; font-size: 0.79rem; }
.vector-debrief p { margin-top: 6px; color: var(--muted); font-size: 0.78rem; line-height: 1.48; }
.vector-result-branches { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.vector-result-branches span { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 740 0.66rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.vector-result-branches span[data-extra="true"] { border-style: dashed; color: var(--accent-2); }
.vector-result-branches span[data-blocked="true"] { border-color: var(--danger); color: var(--danger); text-decoration: line-through; }

.vector-share-preview {
  overflow: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-strong);
  color: var(--ink);
  font: 700 0.8rem/1.48 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}

.vector-stats { padding: 16px; }
.vector-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.vector-stat-grid div { padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, transparent); text-align: center; }
.vector-stat-grid strong,
.vector-stat-grid span { display: block; }
.vector-stat-grid strong { color: var(--ink); font-size: 1.35rem; }
.vector-stat-grid span { margin-top: 3px; color: var(--muted); font-size: 0.7rem; font-weight: 730; }

.vector-rules { overflow: hidden; padding: 0; }
.vector-rules-body { padding: 0 18px 18px; }
.vector-rules ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; counter-reset: vector-rule; list-style: none; }
.vector-rules li { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--panel-strong) 70%, transparent); color: var(--muted); font-size: 0.82rem; line-height: 1.5; counter-increment: vector-rule; }
.vector-rules li::before { display: block; margin-bottom: 8px; color: var(--accent); content: "0" counter(vector-rule); font-size: 0.7rem; font-weight: 900; }
.vector-rules li strong { color: var(--ink); }
.vector-rules-body > p { margin: 16px 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.55; }

.vector-tutorial {
  width: min(760px, calc(100% - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-strong);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(16, 25, 22, 0.28);
}
.vector-tutorial::backdrop { background: rgba(12, 20, 18, 0.58); backdrop-filter: blur(3px); }
.vector-tutorial-shell { display: grid; gap: 15px; padding: 20px; }
.vector-tutorial header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.vector-tutorial h2,
.vector-tutorial p { margin: 0; }
.vector-tutorial h2 { margin-top: 3px; }
.vector-dialog-close { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; font-size: 1.25rem; }
.vector-tutorial-progress { overflow: hidden; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--line) 72%, transparent); }
.vector-tutorial-progress span { display: block; width: 10%; height: 100%; border-radius: inherit; background: var(--accent); transition: width 180ms ease; }
.vector-tutorial-instruction { min-height: 48px; padding: 11px 12px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--muted); line-height: 1.48; }
.vector-tutorial-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(240px, 0.8fr); gap: 14px; }
.vector-tutorial-map { position: relative; overflow: hidden; min-height: 280px; border: 1px solid var(--line); border-radius: 12px; background: repeating-linear-gradient(0deg, transparent 0 55px, color-mix(in srgb, var(--line) 68%, transparent) 55px 56px), repeating-linear-gradient(90deg, transparent 0 55px, color-mix(in srgb, var(--line) 68%, transparent) 55px 56px), color-mix(in srgb, var(--accent) 4%, var(--panel-strong)); }
.tutorial-start,
.tutorial-beacon,
.tutorial-endpoint { position: absolute; z-index: 3; padding: 5px 7px; border-radius: 999px; background: var(--panel-strong); font-size: 0.66rem; font-weight: 850; }
.tutorial-start { bottom: 28px; left: 24px; border: 1px dashed var(--accent); color: var(--accent); }
.tutorial-beacon { top: 30px; right: 22px; border: 2px double var(--accent-2); color: var(--accent-2); }
.tutorial-endpoint { bottom: 130px; left: 46%; border: 2px solid var(--accent-2); color: var(--accent-2); opacity: 0; }
.tutorial-line { position: absolute; z-index: 2; left: 62px; bottom: 57px; height: 0; border-top: 3px dashed var(--accent-2); opacity: 0; transform-origin: left center; }
.tutorial-line-a { width: 145px; transform: rotate(-40deg); }
.tutorial-line-b { bottom: 153px; left: 51%; width: 130px; border-top-style: solid; border-top-color: var(--accent); transform: rotate(-34deg); }
.tutorial-line-c { width: 155px; border-top-color: var(--danger, #a9534b); transform: rotate(22deg); }
.vector-tutorial-map[data-preview="A"] .tutorial-line-a,
.vector-tutorial-map[data-committed="A"] .tutorial-line-a,
.vector-tutorial-map[data-committed="C"] .tutorial-line-c,
.vector-tutorial-map[data-complete="true"] .tutorial-line-a,
.vector-tutorial-map[data-complete="true"] .tutorial-line-b,
.vector-tutorial-map[data-preview="A"] .tutorial-endpoint,
.vector-tutorial-map[data-committed="A"] .tutorial-endpoint,
.vector-tutorial-map[data-complete="true"] .tutorial-endpoint { opacity: 1; }
.vector-tutorial-map[data-preview="A"] .tutorial-line-b,
.vector-tutorial-map[data-committed="A"] .tutorial-line-b { border-top-style: dotted; border-top-color: var(--accent-2); opacity: 0.55; }
.vector-tutorial-map[data-committed="A"] .tutorial-line-a,
.vector-tutorial-map[data-complete="true"] .tutorial-line-a { border-top-style: solid; border-top-color: var(--accent); }
.vector-tutorial-score { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: 0.72rem; }
.vector-tutorial-score strong { color: var(--ink); }
.vector-tutorial-choices { display: grid; gap: 7px; margin-top: 10px; }
.vector-tutorial-choices button { display: flex; min-height: 50px; align-items: center; justify-content: space-between; text-align: left; }
.vector-tutorial-choices button span { color: var(--muted); font-size: 0.7rem; }
.vector-tutorial-choices button[data-selected="true"] { border: 2px solid var(--accent-2); background: color-mix(in srgb, var(--accent-2) 9%, var(--panel-strong)); }
.vector-tutorial-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; }
.vector-tutorial-actions button { min-height: 42px; padding: 5px 7px; font-size: 0.68rem; }
.vector-tutorial-footer { justify-content: space-between; }

@media (max-width: 980px) {
  .vector-objective { grid-template-columns: 1fr; }
  .vector-state-grid { grid-template-columns: repeat(5, 1fr); }
  .vector-scorecard { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vector-scorecard div { border-bottom: 1px solid var(--line); }
  .vector-scorecard div:nth-child(4n) { border-right: 0; }
  .vector-scorecard div:nth-last-child(-n + 3) { border-bottom: 0; }
  .vector-rules ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .vector-play-layout { grid-template-columns: 1fr; }
  .vector-result-header { display: grid; }
  .vector-result-actions { justify-content: flex-start; }
}

@media (max-width: 620px) {
  .vector-game-heading { display: grid; }
  .vector-heading-meta { justify-content: flex-start; }
  .vector-difficulties { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .vector-difficulties button { display: grid; min-height: 78px; align-content: space-between; padding: 9px 7px; }
  .vector-difficulties em { width: fit-content; padding: 3px 5px; font-size: 0.57rem; }
  .vector-state-grid { grid-template-columns: repeat(2, 1fr); }
  .vector-state-grid div { border-bottom: 1px solid var(--line); }
  .vector-state-grid div:nth-child(2n) { border-right: 0; }
  .vector-state-grid div:nth-last-child(-n + 2) { border-bottom: 0; }
  .vector-state-grid .vector-score-state { grid-column: 1 / -1; border-right: 0; }
  .vector-board-wrap { padding: 9px; }
  .vector-cell-coordinate { top: 3px; left: 4px; }
  .vector-board-key { gap: 8px 10px; }
  .vector-actions { gap: 6px; }
  .vector-button { min-height: 48px; padding: 4px 6px; font-size: 0.72rem; }
  .vector-controls > summary,
  .vector-rules > summary { min-height: 54px; padding: 12px 14px; }
  .vector-controls-body,
  .vector-rules-body { padding: 0 12px 14px; }
  .vector-choice { min-height: 78px; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
  .vector-choice-arrow { width: 40px; }
  .vector-choice-meta { font-size: 0.62rem; }
  .vector-scorecard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vector-scorecard div:nth-child(2n) { border-right: 0; }
  .vector-scorecard div:nth-child(4) { border-right: 0; }
  .vector-scorecard div:nth-last-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .vector-scorecard div:last-child { border-bottom: 0; }
  .vector-debrief { grid-template-columns: 1fr; }
  .vector-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vector-rules ol { grid-template-columns: 1fr; }
  .vector-tutorial-shell { padding: 14px; }
  .vector-tutorial-grid { grid-template-columns: 1fr; }
  .vector-tutorial-map { min-height: 220px; }
  .vector-board[data-size="13"] .vector-cell { overflow: hidden; }
  .vector-board[data-size="13"] .vector-cell-coordinate {
    top: 2px;
    left: 3px;
    font-size: .46rem;
  }
  .vector-board[data-size="13"] .vector-cell-marker {
    width: min(76%, 20px);
    height: min(76%, 20px);
    font-size: .6rem;
  }
  .vector-board[data-size="13"] .vector-cell[data-kind="start"] .vector-cell-marker,
  .vector-board[data-size="13"] .vector-cell[data-kind="goal"] .vector-cell-marker {
    width: min(82%, 22px);
    height: min(82%, 22px);
  }
  .vector-board[data-size="13"] .vector-symbol-marker { overflow: hidden; }
  .vector-board[data-size="13"] .vector-option-target,
  .vector-board[data-size="13"] .vector-forecast-target {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(80%, 21px);
    height: min(80%, 21px);
    transform: translate(-50%, -50%);
  }
  .vector-board[data-size="13"] .vector-option-target { font-size: .65rem; }
  .vector-board[data-size="13"] .vector-forecast-target { font-size: .52rem; }
  .vector-radar-clues { grid-template-columns: 1fr; }
  .vector-scan-controls > div { grid-template-columns: 1fr; }
  .vector-scan-controls .vector-button { width: 100%; }
  .vector-board[data-size="13"] .vector-radar-marker {
    min-width: 18px;
    min-height: 18px;
    font-size: .5rem;
  }
  .vector-board[data-size="13"] .vector-airspace-marker {
    top: 1px;
    right: 1px;
    min-width: 12px;
    min-height: 12px;
    font-size: .48rem;
  }
}

.vector-state-grid:has(.vector-airspace-stat:not([hidden])) {
  grid-template-columns: repeat(4, minmax(78px, 1fr));
}

@media (max-width: 980px) {
  .vector-state-grid:has(.vector-airspace-stat:not([hidden])) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .vector-state-grid:has(.vector-airspace-stat:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vector-state-grid:has(.vector-airspace-stat:not([hidden])) .vector-score-state { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .vector-tutorial-progress span { transition: none; }
}

/* Supplied game-visual kit integration. */
.vector-board {
  border-color: var(--gv-line);
  background:
    linear-gradient(color-mix(in srgb, var(--gv-bg) 8%, transparent), color-mix(in srgb, var(--gv-bg) 8%, transparent)),
    url("/assets/game-visuals/assets/vector/grid-background-dark.png?v=20260715e") center / cover no-repeat,
    var(--gv-bg);
}

html[data-theme="light"] .vector-board {
  background:
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08)),
    url("/assets/game-visuals/assets/vector/grid-background-light.png?v=20260715e") center / cover no-repeat,
    var(--gv-bg);
}

.vector-cell { border-color: color-mix(in srgb, var(--gv-line) 72%, transparent); color: var(--gv-muted); }
.vector-cell-coordinate { color: var(--gv-muted); }
.vector-cell[data-kind="start"] .vector-cell-marker,
.vector-cell[data-kind="goal"] .vector-cell-marker {
  width: clamp(34px, 7vw, 48px);
  height: clamp(34px, 7vw, 48px);
  border: 0;
  background: transparent;
}
.vector-cell[data-kind="start"] .vector-cell-marker { color: var(--gv-cyan); }
.vector-cell[data-kind="goal"] .vector-cell-marker { color: var(--gv-green); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--gv-green) 44%, transparent)); }
.vector-symbol-marker { display: block; width: 100%; height: 100%; overflow: visible; }
.vector-cell[data-visited="true"] .vector-cell-marker:not(:has(.vector-symbol-marker)) { border-color: var(--gv-cyan); background: var(--gv-bg); color: var(--gv-cyan); }
.vector-cell[data-current="true"] { background: color-mix(in srgb, var(--gv-cyan) 12%, transparent); box-shadow: inset 0 0 0 2px var(--gv-cyan); }
.vector-cell[data-current="true"] .vector-cell-marker:has(.vector-symbol-marker) { background: transparent; box-shadow: none; }
.vector-cell[data-airspace="uncertain"] {
  background:
    radial-gradient(circle, color-mix(in srgb, var(--gv-blue) 45%, transparent) 1px, transparent 1.5px) 0 0 / 7px 7px,
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--gv-blue) 9%, transparent) 0 4px, transparent 4px 9px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gv-blue) 52%, transparent);
}
.vector-cell[data-airspace="uncertain"] .vector-airspace-marker {
  color: var(--gv-blue);
  font-weight: 950;
  text-shadow: 0 0 7px var(--gv-bg);
}
.vector-airspace-marker {
  position: absolute;
  top: 2px;
  right: 3px;
  z-index: 6;
  display: grid;
  min-width: 16px;
  min-height: 16px;
  place-items: center;
  border: 1px dotted currentColor;
  border-radius: 4px;
  background: color-mix(in srgb, var(--gv-bg) 86%, transparent);
  color: var(--gv-blue);
  font: 950 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  pointer-events: none;
}
.vector-cell[data-airspace="clear"] {
  background: color-mix(in srgb, var(--gv-green) 13%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gv-green) 72%, transparent);
}
.vector-cell[data-airspace="clear"] .vector-airspace-marker { color: var(--gv-green); }
.vector-cell[data-airspace="storm"] {
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--danger) 22%, transparent) 0 4px, transparent 4px 9px),
    color-mix(in srgb, var(--danger) 8%, transparent);
  box-shadow: inset 0 0 0 2px var(--danger);
}
.vector-cell[data-airspace="storm"] .vector-airspace-marker { color: var(--danger); }
.vector-cell[data-airspace] .vector-cell-coordinate,
.vector-cell:has(.vector-radar-marker) .vector-cell-coordinate { display: block; }
.vector-radar-marker {
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 5;
  display: inline-flex;
  min-width: 24px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--gv-cyan) 74%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--gv-bg) 86%, transparent);
  color: var(--gv-cyan);
  font-size: clamp(.55rem, 1.4vw, .72rem);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}
.vector-radar-marker sup { margin-left: -2px; font-size: .54em; }
.vector-radar-range {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 280%;
  height: 280%;
  border: 1px dashed color-mix(in srgb, var(--gv-cyan) 42%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--gv-cyan) 2%, transparent);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.vector-cell:has(.vector-radar-range) { overflow: visible !important; }
.vector-key-uncertain,
.vector-key-clear,
.vector-key-storm,
.vector-key-radar {
  display: inline-grid !important;
  width: 18px !important;
  height: 18px !important;
  place-items: center;
  border-radius: 4px;
  font: 900 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.vector-key-uncertain { border: 1px dotted var(--gv-blue); color: var(--gv-blue); background: color-mix(in srgb, var(--gv-blue) 9%, transparent); }
.vector-key-clear { border: 1px solid var(--gv-green); color: var(--gv-green); }
.vector-key-storm { border: 1px solid var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.vector-key-radar { border: 1px solid var(--gv-cyan); border-radius: 50%; color: var(--gv-cyan); }

.vector-airspace-panel {
  display: grid;
  gap: 10px;
  margin-top: 13px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--gv-blue) 54%, var(--line));
  border-radius: 11px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--gv-blue) 9%, transparent), transparent 58%),
    color-mix(in srgb, var(--panel-strong) 88%, transparent);
}
.vector-airspace-panel[hidden] { display: none; }
.vector-airspace-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vector-airspace-heading h3,
.vector-airspace-heading p,
.vector-airspace-panel > p { margin: 0; }
.vector-airspace-heading h3 { margin-top: 3px; font-size: .9rem; }
.vector-airspace-heading > span { flex: 0 0 auto; color: var(--gv-blue); font-size: .68rem; font-weight: 820; }
.vector-airspace-panel > p { color: var(--muted); font-size: .75rem; line-height: 1.48; }
.vector-candidate-routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vector-candidate-routes li {
  min-width: 0;
  padding: 7px 9px;
  border: 1px dashed color-mix(in srgb, var(--gv-blue) 38%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--gv-blue) 4%, transparent);
  color: var(--muted);
  font: 750 .65rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}
.vector-candidate-routes strong { color: var(--ink); }
.vector-candidate-routes small { display: block; margin-top: 3px; color: var(--ink); font: 700 .63rem/1.35 var(--font-body, system-ui, sans-serif); }
.vector-radar-clues {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vector-radar-clues li {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--gv-bg) 70%, transparent);
  color: var(--muted);
  font-size: .69rem;
  line-height: 1.4;
}
.vector-radar-clues strong { display: block; color: var(--ink); font-size: .73rem; }
.vector-scan-controls { display: grid; gap: 5px; }
.vector-scan-controls label { color: var(--ink); font-size: .72rem; font-weight: 780; }
.vector-scan-controls > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.vector-scan-controls select {
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--ink);
  font: inherit;
}
.vector-scan-controls select:focus-visible { outline: 3px solid color-mix(in srgb, var(--gv-blue) 44%, transparent); outline-offset: 2px; }
.vector-airspace-status { min-height: 22px; padding-left: 9px; border-left: 3px solid var(--gv-cyan); }
.vector-option-target { border-color: var(--gv-cyan); background: var(--gv-bg); color: var(--gv-cyan); }
.vector-cell[data-option-target="B"] .vector-option-target,
.vector-cell[data-selected="true"] .vector-option-target { border-color: var(--gv-blue); color: var(--gv-blue); }
.vector-forecast-target { border-color: var(--gv-blue); background: var(--gv-bg); color: var(--gv-blue); }
.vector-map-line[data-kind="committed"] { height: 4px; background: var(--gv-cyan); color: var(--gv-cyan); box-shadow: 0 0 10px color-mix(in srgb, var(--gv-cyan) 20%, transparent); }
.vector-map-line[data-kind="preview"] { border-top-color: var(--gv-blue); color: var(--gv-blue); }
.vector-map-line[data-kind="forecast"] { border-top-color: color-mix(in srgb, var(--gv-blue) 70%, transparent); color: var(--gv-blue); }
.vector-map-line[data-kind="explored"] { border-top-color: color-mix(in srgb, var(--gv-muted) 34%, transparent); color: var(--gv-muted); }

.vector-reach-boundary {
  position: absolute;
  max-width: 160%;
  max-height: 160%;
  border: 2px dashed color-mix(in srgb, var(--gv-cyan) 38%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--gv-cyan) 3%, transparent);
  transform: translate(-50%, -50%);
}

.vector-result-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.vector-result-header .gv-completion-badge { width: 178px; }

@media (max-width: 800px) {
  .vector-result-header { grid-template-columns: 1fr; }
  .vector-result-header .gv-completion-badge { width: min(220px, 100%); }
}

@media (max-width: 560px) {
  .vector-candidate-routes { grid-template-columns: 1fr; }
}

@media (forced-colors: active) {
  .vector-reach-boundary,
  .vector-map-line,
  .vector-cell[data-airspace],
  .vector-radar-marker { forced-color-adjust: auto; }
}