/* MapSprint USA. Brand kit colors, rounded display type, and a calm Paper learning surface.
   Base type stays at 18px because this lab is used by a young learner. */

:root {
  --ink: #102a43;
  --ink-soft: #243b53;
  --blue: #2f80ed;
  --blue-deep: #1f64bd;
  --red: #e5484d;
  --gold: #ffcc4d;
  --paper: #f7fafc;
  --page: #eaf2f8;
  --white: #ffffff;
  --muted: #52708f;
  --line: #d9e2ec;
  --edge: #486581;
  --green: #17a673;
  --land: #c9d8e5;
  --land-hover: #8fc4f2;
  --display: "Arial Rounded MT Bold", ui-rounded, "Helvetica Rounded", "Trebuchet MS", sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 18px 55px rgba(16, 42, 67, 0.12);
}

* { box-sizing: border-box; }

/* Layout rules below set display, so hidden needs to win over them. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--page);
  overflow-x: hidden;
}

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--white);
  color: var(--ink);
  padding: 12px 16px;
  z-index: 30;
  border-radius: 0 0 14px 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* Hero band. A real element, so it always ends exactly under the stats. */

.hero-band {
  background: var(--ink);
  padding-bottom: 26px;
}

/* Top bar */

.topbar {
  display: flex;
  align-items: center;
  /* The brand is pinned left with its own margin rather than left by way of
     space-between, so a wrapped or shrunken action group can never centre it. */
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 76px;
  padding-top: 14px;
  padding-bottom: 14px;
  color: var(--white);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  text-decoration: none;
  color: var(--white);
  flex: 0 0 auto;
}

.brand img { width: 44px; height: 44px; display: block; }

.brand-words { display: flex; align-items: baseline; gap: 7px; }
.brand-words strong { font-family: var(--display); font-size: 24px; letter-spacing: -0.01em; }
.brand-words small { letter-spacing: 0.18em; color: #a8d4ff; font-weight: 800; font-size: 15px; }

.header-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }

/* Hero */

.intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--white);
  /* Keep the auto side margins from .wrap. A plain `margin: 6px 0 0` here would
     drop them and let the hero run full bleed while the header stayed centred. */
  margin: 6px auto 0;
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 14px;
  letter-spacing: 0.16em;
  font-weight: 900;
  color: #a8d4ff;
  text-transform: uppercase;
}

.intro h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 4.2vw, 3.9rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
}

.intro h1 span { color: var(--gold); }

.stats { display: flex; gap: 9px; flex-wrap: wrap; }

.stats div {
  min-width: 104px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
}

.stats strong { font-family: var(--display); font-size: 28px; line-height: 1.1; }
.stats span { color: #bcccdc; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }

/* Cards */

main { padding-top: 20px; }

.shell {
  background: var(--white);
  border-radius: 8px 8px 24px 24px;
  box-shadow: var(--shadow);
  padding: 24px;
  margin: 0 0 18px;
}

.shell + .shell { border-radius: 24px; }

.shell-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.shell-title {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
}

.shell-note { font-size: 16px; color: var(--muted); margin: 10px 0 0; }

.field-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 900;
  margin: 22px 0 9px;
}

/* Mode tabs */

.mode-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.mode {
  position: relative;
  border: 0;
  border-radius: 18px 18px 8px 8px;
  background: var(--line);
  color: var(--muted);
  padding: 15px 16px 15px 58px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  box-shadow: 0 8px 20px rgba(16, 42, 67, 0.07);
  min-height: 68px;
  transition: transform 140ms ease, background 140ms ease;
}

.mode .mode-badge {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #bcccdc;
  color: var(--white);
  font-weight: 900;
  font-size: 16px;
}

.mode b, .mode small { display: block; }
.mode b { font-family: var(--display); font-size: 17px; color: var(--ink); font-weight: 700; }
.mode small { margin-top: 2px; font-size: 14px; }

.mode[aria-checked="true"] { background: var(--white); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16, 42, 67, 0.14); }
.mode[aria-checked="true"] .mode-badge { background: var(--red); }
.mode[aria-checked="true"]::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 4px;
  border-radius: 4px;
  background: var(--blue);
}

/* Region pills */

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }

.pill {
  font: inherit;
  font-size: 16px;
  font-weight: 750;
  background: var(--white);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  min-height: 46px;
  cursor: pointer;
}

@media (hover: hover) {
  .pill:hover { border-color: var(--blue); color: var(--blue); }
}

.pill[aria-checked="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.mode-blurb {
  font-size: 17px;
  color: var(--ink-soft);
  border-left: 5px solid var(--blue);
  padding: 10px 14px;
  margin: 20px 0 0;
}

/* Buttons */

.primary, .ghost, .text-button {
  font: inherit;
  cursor: pointer;
}

.primary {
  border: 0;
  border-radius: 13px;
  padding: 13px 22px;
  min-height: 50px;
  background: var(--blue);
  color: var(--white);
  font-weight: 850;
  box-shadow: 0 6px 0 var(--blue-deep);
}
@media (hover: hover) {
  .primary:hover { background: #3a8bf2; }
}
.primary:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--blue-deep); }

.ghost {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  border-radius: 12px;
  padding: 11px 16px;
  min-height: 46px;
  font-weight: 750;
}
@media (hover: hover) {
  .ghost:hover { border-color: var(--blue); color: var(--blue); }
}

.topbar .ghost { background: transparent; color: var(--white); border-color: var(--edge); }
.topbar .ghost:hover { background: var(--ink-soft); color: var(--white); }

.text-button {
  border: 0;
  background: none;
  color: var(--blue);
  font-weight: 800;
  padding: 10px 8px;
  min-height: 44px;
  border-radius: 8px;
}
.text-button:hover { text-decoration: underline; }

button:focus-visible, a:focus-visible, input:focus-visible, .state-shape:focus-visible, .state-tab:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.action-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }

/* Play head */

.instruction {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.prompt {
  margin: 5px 0 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.prompt .prompt-target { color: var(--red); }

/* Scoreboard */

.scoreboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin: 18px 0 14px;
}

.score-cell {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 12px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}

.score-cell-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 800; }
.score-cell-value { font-family: var(--display); font-size: 25px; line-height: 1.15; font-weight: 700; }

.score-cell.is-best { background: #fff8e4; border-color: var(--gold); }
.score-cell.is-hot .score-cell-value { color: var(--green); }

/* Map */

.map-card {
  position: relative;
  background: var(--paper);
  border: 1px solid #e6edf3;
  border-radius: 18px;
  overflow: hidden;
  padding: 10px;
}

.map-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 2px 2px 10px;
}

.zoom-button {
  font: inherit;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  min-width: 48px;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}

.zoom-button.wide { font-size: 15px; font-weight: 800; }
@media (hover: hover) {
  .zoom-button:hover { border-color: var(--blue); color: var(--blue); }
}
.zoom-button[disabled] { opacity: 0.4; cursor: default; }
.zoom-button[disabled]:hover { border-color: var(--line); color: var(--ink); }

.zoom-level {
  margin-left: auto;
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
}

.map-holder {
  width: 100%;
  touch-action: none;
  overscroll-behavior: contain;
}

.us-map {
  display: block;
  width: 100%;
  height: auto;
  min-height: 240px;
  cursor: grab;
  /* iOS Safari ignores touch-action on SVG, so the touch handlers do the real work.
     These stop the long press callout, text selection, and the tap highlight. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.us-map.is-panning { cursor: grabbing; }
.us-map * { -webkit-tap-highlight-color: transparent; }

/* Strokes stay a steady weight at every zoom level. */
.state-shape, .state-tab, .tab-line {
  vector-effect: non-scaling-stroke;
}

.state-shape {
  fill: var(--land);
  stroke: var(--white);
  stroke-width: 1.6;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 150ms ease;
}

@media (hover: hover) {
  .state-shape:hover { fill: var(--land-hover); }
}

.state-tab {
  fill: var(--land);
  stroke: var(--white);
  stroke-width: 2;
  cursor: pointer;
  transition: fill 150ms ease;
}
@media (hover: hover) {
  .state-tab:hover { fill: var(--land-hover); }
}

.tab-line { stroke: #a8bed2; stroke-width: 1.2; fill: none; }

.state-shape.is-correct, .state-tab.is-correct { fill: var(--green); stroke: var(--white); }
.state-shape.is-wrong, .state-tab.is-wrong { fill: var(--red); stroke: var(--white); }
.state-shape.is-target, .state-tab.is-target { fill: var(--gold); stroke: var(--ink); stroke-width: 2.6; }

.state-shape.is-quiet, .state-tab.is-quiet { pointer-events: none; }

.capital-star { fill: var(--red); stroke: var(--white); stroke-width: 1.4; pointer-events: none; }

.map-label {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--white);
  stroke-width: 5;
  stroke-linejoin: round;
  text-anchor: middle;
  pointer-events: none;
}

.map-sublabel {
  font-family: var(--display);
  font-size: 21px;
  fill: var(--red);
  paint-order: stroke;
  stroke: var(--white);
  stroke-width: 5;
  stroke-linejoin: round;
  text-anchor: middle;
  pointer-events: none;
}

.map-key {
  margin: 8px 2px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.4;
}

.map-key i {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--land);
  margin-right: 5px;
  vertical-align: baseline;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.map-holder.shake { animation: shake 220ms ease; }

/* Answer area */

.answer-form {
  display: flex;
  gap: 9px;
  max-width: 620px;
  margin: 18px 0 6px;
  flex-wrap: wrap;
}

.answer-form input {
  flex: 1 1 220px;
  min-width: 0;
  border: 2px solid var(--line);
  border-radius: 13px;
  padding: 13px 15px;
  font: inherit;
  font-size: 21px;
  outline: none;
  color: var(--ink);
  background: var(--white);
}

.answer-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47, 128, 237, 0.14); }

.feedback {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: 10px;
  color: var(--muted);
  font-weight: 700;
  font-size: 17px;
}

.feedback.good { color: var(--green); }
.feedback.bad { color: var(--red); }

.feedback .spellout {
  display: inline-block;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: 3px;
  font-size: 21px;
  background: var(--paper);
  border-radius: 8px;
  padding: 2px 9px;
}

.feedback .letter-bad { color: var(--red); }
.feedback .letter-good { color: var(--green); }

.play-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* Progress */

.progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 0;
}

.progress-track {
  flex: 1 1 150px;
  height: 9px;
  background: #e6edf3;
  border-radius: 99px;
  overflow: hidden;
}

.progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width 300ms ease;
}

.progress-text, .score-text {
  margin: 0;
  font-weight: 900;
  color: var(--muted);
  font-size: 15px;
  white-space: nowrap;
}

/* Round complete */

.result-shell { border: 5px solid var(--gold); border-radius: 24px; text-align: center; }
.confetti { font-size: 46px; color: var(--gold); line-height: 1; margin: 0; }
.result-shell .eyebrow { color: var(--muted); }
.result-stars { font-size: 38px; margin: 6px 0 0; letter-spacing: 6px; color: var(--gold); }
.result-score { font-family: var(--display); font-size: 27px; font-weight: 700; margin: 8px 0 2px; }
.result-points { font-size: 19px; font-weight: 800; color: var(--blue); margin: 2px 0; }
.result-best { font-size: 16px; color: var(--muted); margin: 4px 0 8px; font-weight: 700; }
.result-best.is-record { color: #8a5b00; }
.result-shell .action-row { justify-content: center; }

.missed-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 14px;
  text-align: left;
}

.missed-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.missed-list li { display: flex; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; background: var(--white); font-size: 16px; }
.missed-list b { font-weight: 800; }
.missed-list span { color: var(--muted); text-align: right; }

/* Study list */

.study-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.study-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
}

.study-item b { font-size: 17px; font-weight: 800; }
.study-item span { font-size: 16px; color: var(--muted); text-align: right; }

/* Guide */

.guide-list { font-size: 17px; margin: 10px 0 0; padding-left: 20px; color: var(--ink-soft); }
.guide-list li { margin: 9px 0; }

/* Footer */

.site-footer { color: var(--muted); padding: 8px 0 34px; }

.footer-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 15px;
}

.footer-row p { margin: 0; }
.footer-row a { color: var(--ink); font-weight: 700; }

/* Dialog */

.name-dialog {
  width: min(460px, calc(100% - 28px));
  border: 0;
  border-radius: 22px;
  padding: 24px;
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(16, 42, 67, 0.3);
}

.name-dialog::backdrop { background: rgba(16, 42, 67, 0.72); }

.name-dialog h2 { font-family: var(--display); margin: 0 0 6px; font-size: 24px; font-weight: 700; }

.name-dialog input {
  font: inherit;
  font-size: 20px;
  width: 100%;
  min-height: 50px;
  padding: 12px 15px;
  border: 2px solid var(--line);
  border-radius: 13px;
  margin-top: 12px;
}
.name-dialog input:focus { border-color: var(--blue); outline: none; }

/* Policy page */

.policy h1 { font-family: var(--display); font-size: 30px; font-weight: 700; margin: 0 0 10px; }
.policy h2 { font-family: var(--display); font-size: 21px; font-weight: 700; margin: 24px 0 6px; }
.policy p { color: var(--ink-soft); margin: 8px 0; }
.policy code { background: var(--paper); border-radius: 6px; padding: 2px 6px; font-size: 15px; }

/* Small screens */

@media (max-width: 760px) {
  .wrap { padding: 0 14px; }
  .intro h1 { font-size: 2rem; }
  .stats { gap: 6px; }
  .topbar { min-height: 64px; }
  .brand img { width: 38px; height: 38px; }
  .brand-words strong { font-size: 20px; }
  .brand-words small { font-size: 13px; }
  .shell { padding: 16px 14px; border-radius: 7px 7px 20px 20px; }
  .intro { align-items: flex-start; }
  .stats div { min-width: 88px; padding: 9px 12px; }
  .stats strong { font-size: 22px; }
  .mode-tabs { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .mode { padding: 12px 10px 14px; text-align: center; border-radius: 14px 14px 7px 7px; min-height: 0; }
  .mode .mode-badge { position: static; transform: none; margin: 0 auto 5px; width: 26px; height: 26px; }
  .mode b { font-size: 15px; }
  .mode small { display: none; }
  .scoreboard { grid-template-columns: repeat(2, 1fr); }
  .zoom-button.wide { font-size: 14px; padding: 8px 10px; }
  .play-actions .primary, .play-actions .ghost { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Full screen map. A fixed overlay rather than the Fullscreen API, because iOS
   Safari support for that API on ordinary elements cannot be relied on. */

.map-prompt {
  margin: 0 2px 8px;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  font-weight: 700;
  line-height: 1.2;
}
.map-prompt .prompt-target { color: var(--red); }

.map-dock:empty { display: none; }
.map-dock { margin-top: 10px; }

body.is-map-full { overflow: hidden; }

body.is-map-full .map-card {
  position: fixed;
  inset: 0;
  z-index: 60;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The United States is a wide shape, so on a portrait screen it can never fill the
   height. Group the controls with the map so the layout reads as one block rather
   than a small map stranded in white space. Landscape gives a far bigger map. */
body.is-map-full .map-card { justify-content: center; gap: 2px; }

body.is-map-full .map-holder {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  background: var(--paper);
  border-radius: 14px;
  padding: 4px;
}

body.is-map-full .us-map {
  height: 100%;
  width: 100%;
  min-height: 0;
  max-height: 100%;
  flex: 1 1 auto;
}

body.is-map-full .map-key { display: none; }
body.is-map-full .map-toolbar { padding-bottom: 6px; }

body.is-map-full .map-dock .answer-form { margin: 8px 0 0; max-width: none; }
body.is-map-full .map-dock .feedback { min-height: 32px; margin-top: 6px; }
body.is-map-full .map-dock .play-actions { margin-top: 8px; }

#zoom-full[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

@media (max-width: 760px) {
  body.is-map-full .map-card { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .map-prompt { font-size: 1.15rem; }
}

/* Coverage. Names of the states already answered stay on the map, so the country
   fills in as the round goes. Softer than the live highlight, so the current
   question still reads first. */

.state-shape.is-done-clean, .state-tab.is-done-clean {
  fill: #bfe6d4;
  stroke: var(--white);
}

.state-shape.is-done-missed, .state-tab.is-done-missed {
  fill: #ffdfae;
  stroke: var(--white);
}

.map-cover-label {
  font-family: var(--display);
  font-weight: 700;
  fill: #0f5c41;
  paint-order: stroke;
  stroke: var(--white);
  stroke-width: 4;
  stroke-linejoin: round;
  text-anchor: middle;
  pointer-events: none;
}

.map-cover-label.is-missed { fill: #8a5b00; }
.map-cover-label.on-tab { stroke-width: 3; }

/* Listen row. Both words are always reachable, so a learner can hear the state and
   the capital in any stage, and mute sits with them rather than only in the header. */

.voice-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.voice-label {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}

.voice-chip {
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  min-height: 44px;
  cursor: pointer;
}

@media (hover: hover) {
  .voice-chip:hover { border-color: var(--blue); color: var(--blue); }
}

.voice-chip.is-mute { margin-left: auto; }
.voice-chip.is-mute[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

body.is-map-full .map-dock .voice-bar { margin-top: 6px; padding-top: 8px; }

@media (max-width: 760px) {
  .voice-chip { font-size: 14px; padding: 9px 11px; }
  .voice-chip.is-mute { margin-left: 0; }
}

/* Leader line from a state to its floated name. */
.cover-line {
  stroke: #9fb3c8;
  fill: none;
  vector-effect: non-scaling-stroke;
}