:root {
  font:
    16px 'Helvetica Neue',
    Arial,
    sans-serif;
  color: #30383b;
  background: #78bccc;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
main,
#map,
#people,
#warmth {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
#people {
  pointer-events: none;
  z-index: 3;
  width: 100%;
  height: 100%;
}
#warmth {
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at 20% 0%, #ffc46d70, transparent 75%);
  opacity: var(--heat, 0.1);
  transition: opacity 2s;
}
button {
  font: inherit;
  cursor: pointer;
  border: 0;
  color: inherit;
  background: #faf9ef;
  border-radius: 50%;
  font-weight: 900;
  padding: 10px 15px;
}
button:focus-visible {
  outline: 3px solid #317d9f;
  outline-offset: 4px;
}
button:hover {
  filter: brightness(1.04);
}
button:disabled {
  opacity: 0.35;
  cursor: default;
}
header {
  position: absolute;
  top: 22px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 5;
}
.brand {
  font-size: 25px;
  font-weight: 900;
  letter-spacing: -1px;
  margin-right: 10px;
}
.brand b {
  color: #437e8e;
}
#weather {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-weight: 900;
  z-index: 5;
}
#weather .sun {
  font-size: 27px;
  color: #d6a54e;
  display: inline-block;
  margin-right: 8px;
}
#weather small {
  display: block;
  font-size: 12px;
  color: #526469;
}
#vitals {
  position: absolute;
  right: 24px;
  top: 26px;
  z-index: 5;
  text-align: right;
}
#cooled {
  display: block;
  font-size: 20px;
  font-weight: 900;
}
#emergency {
  font-size: 12px;
}
.meter {
  height: 5px;
  background: #e3e5dbaa;
  width: 140px;
  border-radius: 8px;
  margin: 6px 0 0 auto;
}
.meter i {
  display: block;
  background: #d97055;
  height: 100%;
  width: 0;
  transition: width 0.25s;
}
#coach {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 94px;
  transform: translateX(-50%);
  width: max-content;
  max-width: 600px;
  background: #faf9efe8;
  border-radius: 16px;
  padding: 10px 19px;
  font-weight: 700;
  text-align: center;
  font-size: 15px;
}
footer {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 35px;
  align-items: center;
  z-index: 5;
}
#tools {
  display: flex;
  gap: 22px;
}
.tool {
  width: 78px;
  height: 78px;
  position: relative;
  border: 4px solid transparent;
  background: #323c40;
  color: #f6f3e5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 0 #24383d15;
}
.tool svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tool.active {
  border-color: #f7f3e6;
  outline: 3px solid #467f85;
  transform: translateY(-4px);
}
.tool .count {
  position: absolute;
  right: -8px;
  top: -6px;
  border: 4px solid #323c40;
  background: #f4f1e3;
  color: #30383b;
  border-radius: 50%;
  font-size: 17px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
}
.tool .label {
  position: absolute;
  top: 80px;
  color: #35484d;
  font-size: 12px;
  white-space: nowrap;
}
.transport {
  display: flex;
  align-items: center;
  gap: 7px;
}
.transport small {
  display: none;
}
.transport button {
  width: 42px;
  height: 42px;
  padding: 0;
  background: #faf9efdd;
}
.credit {
  position: absolute;
  left: 18px;
  bottom: 8px;
  font-size: 10px;
  color: #557980;
  z-index: 4;
}
.place {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 15px;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.place:hover {
  background: transparent;
}
.place img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(5px 8px 0 #344b4322);
}
.place.home img {
  filter: drop-shadow(5px 8px 0 #344b4322) saturate(calc(1 + var(--heat, 0.2)));
}
.place.roof img {
  filter: drop-shadow(5px 8px 0 #344b4322) saturate(0.2) brightness(1.22);
}
.place.center {
  width: 94px;
  height: 94px;
}
.place.empty {
  width: 54px;
  height: 54px;
  border: 3px dashed #f3f5e8;
  background: #8ab9b5aa;
  color: #fff;
  font-size: 34px;
  border-radius: 14px;
}
.place .name {
  position: absolute;
  top: 82px;
  left: 50%;
  transform: translateX(-50%);
  background: #faf9eff0;
  border-radius: 8px;
  padding: 3px 6px;
  white-space: nowrap;
  font-size: 12px;
  pointer-events: none;
}
.place .badge {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  background: #f8f6e9;
  color: #3d778d;
  font-size: 14px;
  border-radius: 12px;
  padding: 1px 7px;
  white-space: nowrap;
  pointer-events: none;
}
.place.eligible {
  outline: 3px dashed #edcc72;
  outline-offset: 2px;
}
.place .queue {
  position: absolute;
  left: 50%;
  top: 77px;
  transform: translateX(-50%);
  color: #b64734;
  background: #fff5e5;
  padding: 3px 7px;
  border-radius: 9px;
  font-size: 13px;
  white-space: nowrap;
}
.place .slots {
  position: absolute;
  left: 50%;
  top: 76px;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  background: #faf9ef;
  padding: 4px;
  border-radius: 6px;
}
.slots i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #dce7e3;
}
.slots i.busy {
  background: #4d94b0;
}
.place.fallback {
  background: #df957f;
  border: 6px solid #fbf8ec;
  box-shadow: 6px 7px 0 #9e786d;
  border-radius: 12px;
}
.place.center.fallback {
  background: #6aa5b9;
}
.place.selected .name {
  display: block !important;
}
#detail {
  position: absolute;
  z-index: 6;
  right: 22px;
  top: 150px;
  background: #faf9eff5;
  padding: 20px;
  border-radius: 20px;
  width: 260px;
}
#detail h3 {
  margin: 0 0 8px;
}
#detail p {
  font-size: 14px;
  line-height: 1.5;
}
#detail button {
  float: right;
  padding: 3px 9px;
}
dialog {
  border: 0;
  color: #30383b;
  background: #f9f8f0bb;
  border-radius: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
}
dialog::backdrop {
  background: #edf0e0a6;
  backdrop-filter: blur(10px);
}
#content {
  max-width: 780px;
  margin: auto;
  padding: 10vh 30px 40px;
}
#close {
  position: absolute;
  right: 25px;
  top: 25px;
  background: #30383b;
  color: #f4f1e7;
}
dialog h2 {
  font-size: 54px;
  margin: 0 0 8px;
  letter-spacing: -2px;
}
dialog p {
  font-size: 18px;
  line-height: 1.5;
}
dialog .choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  margin-top: 55px;
}
.choice {
  background: transparent;
  border-radius: 20px;
  padding: 15px;
  text-align: center;
}
.choice:hover {
  background: #fff8;
}
.choice .disc {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #30383b;
  color: #f7f3e6;
  display: grid;
  place-items: center;
  margin: auto auto 20px;
  position: relative;
}
.disc svg {
  width: 67px;
  height: 67px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.disc .amount {
  position: absolute;
  left: -12px;
  top: 20px;
  width: 46px;
  height: 46px;
  background: #f8f5e9;
  border: 5px solid #30383b;
  color: #30383b;
  border-radius: 50%;
  font-size: 24px;
  display: grid;
  place-items: center;
}
.choice strong {
  display: block;
  font-size: 26px;
}
.choice small {
  display: block;
  font-size: 18px;
  font-weight: 600;
  margin-top: 5px;
}
.hint {
  font-size: 13px !important;
  color: #617478;
}
.primary {
  border-radius: 30px;
  background: #30383b;
  color: #f9f6e9;
  padding: 14px 25px;
}
.big {
  font-size: 74px;
  font-weight: 900;
  color: #4d8d9a;
}
.maplibregl-ctrl-bottom-right {
  bottom: 140px;
}
.maplibregl-ctrl-attrib {
  font-size: 10px !important;
}
.peek {
  display: block;
  margin: 40px auto 0;
  border-radius: 30px;
  background: transparent;
  font-size: 14px;
}
dialog.peek-city {
  background: transparent;
  pointer-events: none;
}
dialog.peek-city #content > *:not(.peek) {
  visibility: hidden;
}
dialog.peek-city .peek {
  pointer-events: auto;
  background: #faf9ef;
}
dialog.peek-city::backdrop {
  background: transparent;
  backdrop-filter: none;
}
@media (max-width: 700px) {
  header {
    top: 14px;
    left: 12px;
    gap: 7px;
  }
  .brand {
    font-size: 20px;
    margin-right: 0;
  }
  header button {
    padding: 7px 11px;
  }
  #weather {
    top: 64px;
    font-size: 14px;
  }
  #weather small {
    font-size: 11px;
  }
  #vitals {
    top: 15px;
    right: 12px;
  }
  #cooled {
    font-size: 16px;
  }
  .meter {
    width: 90px;
  }
  #emergency {
    font-size: 10px;
  }
  #coach {
    top: 112px;
    max-width: 92%;
    width: 92%;
    font-size: 13px;
    padding: 9px 12px;
  }
  footer {
    bottom: 29px;
    gap: 18px;
  }
  #tools {
    gap: 15px;
  }
  .tool {
    width: 58px;
    height: 58px;
  }
  .tool svg {
    width: 28px;
    height: 28px;
  }
  .tool .label {
    top: 60px;
    font-size: 10px;
  }
  .tool .count {
    font-size: 14px;
    width: 26px;
    height: 26px;
    right: -8px;
    top: -8px;
  }
  .transport {
    flex-direction: column;
    gap: 4px;
  }
  .transport button {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
  .place {
    width: 60px;
    height: 60px;
  }
  .place.center {
    width: 72px;
    height: 72px;
  }
  .place.empty {
    width: 42px;
    height: 42px;
  }
  .place .slots {
    top: 57px;
  }
  .place .name {
    top: 65px;
    font-size: 10px;
  }
  .place .queue {
    top: 61px;
    font-size: 10px;
  }
  .place .badge {
    font-size: 11px;
  }
  .credit {
    font-size: 9px;
    max-width: 220px;
  }
  .maplibregl-ctrl-bottom-right {
    bottom: 130px;
  }
  #detail {
    top: 170px;
    right: 12px;
    width: 240px;
  }
  #content {
    padding: 17vh 22px 30px;
  }
  dialog h2 {
    font-size: 40px;
  }
  dialog p {
    font-size: 16px;
  }
  dialog .choices {
    gap: 10px;
    margin-top: 35px;
  }
  .choice {
    padding: 8px;
  }
  .choice .disc {
    width: 100px;
    height: 100px;
  }
  .disc svg {
    width: 52px;
    height: 52px;
  }
  .choice strong {
    font-size: 20px;
  }
  .choice small {
    font-size: 15px;
  }
  .disc .amount {
    width: 35px;
    height: 35px;
    font-size: 19px;
  }
  .peek {
    margin-top: 25px;
  }
}
@media (max-width: 700px) {
  #weather {
    top: 58px;
    line-height: 1.3;
  }
  #weather .sun {
    font-size: 20px;
  }
  #weather small {
    line-height: 1.5;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
/* Building symbols are sized to their real street setback, keeping roads clear. */
.place .slots {
  top: 95%;
  padding: 3px;
}
.place .slots i {
  width: 5px;
  height: 5px;
}
.place .name {
  top: 112%;
  font-size: 11px;
}
.place .queue {
  top: 112%;
  font-size: 11px;
}
.place .badge {
  top: -15px;
  font-size: 10px;
}
.place.empty {
  font-size: 24px;
  border-width: 2px;
}
.place img {
  filter: drop-shadow(3px 4px 0 #344b4322);
}
@media (max-width: 700px) {
  #cooled {
    font-size: 14px;
  }
  .credit {
    bottom: 2px;
    font-size: 9px;
    max-width: 95%;
  }
  .place .name {
    top: 110%;
  }
  .place .slots {
    top: 95%;
  }
  .place .queue {
    top: 110%;
  }
}
.choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.choice .disc {
  flex-shrink: 0;
  margin: 0 auto 20px;
}
/* Graphic UI pass: crisp typography, restrained edges, icon-led choices. */
:root {
  color: #303638;
}
button {
  font-weight: 700;
}
header {
  gap: 8px;
}
.brand {
  font-weight: 800;
  letter-spacing: -1.3px;
}
header button {
  width: 38px;
  height: 38px;
  padding: 0;
  background: #faf9eff2;
}
#weather {
  font-weight: 700;
  letter-spacing: -0.3px;
}
#weather small {
  font-weight: 500;
  letter-spacing: 0.1px;
  margin-top: 4px;
}
#cooled {
  font-weight: 750;
  letter-spacing: -0.6px;
}
#coach {
  border-radius: 3px;
  border-left: 3px solid #35464a;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 3px 0 #3343400b;
}
.meter {
  border-radius: 0;
  height: 4px;
}
.tool {
  box-shadow: 0 3px 0 #21333425;
  transition: transform 0.16s;
}
.tool .label {
  font-weight: 700;
}
.tool.active {
  outline: 2px solid #35464a;
}
.transport {
  border-left: 1px solid #34434738;
  padding-left: 18px;
}
.transport button {
  background: #faf9eff2;
}
.place img,
.place.home img {
  filter: drop-shadow(2px 3px 0 #344b4329);
}
.place.roof img {
  filter: saturate(0.08) brightness(1.55) drop-shadow(2px 3px 0 #344b4329);
}
.place {
  border-radius: 3px;
}
.place.empty {
  border-radius: 3px;
  color: #386e7a;
  background: #eff5e7bb;
  border: 2px dashed #5995a1;
  font-weight: 500;
}
.place.eligible {
  outline-width: 2px;
  outline-offset: 0;
}
.place .badge,
.place .queue,
.place .name {
  border-radius: 2px;
  font-weight: 600;
  padding: 3px 5px;
}
.place .badge {
  top: -12px;
}
.place .slots {
  border-radius: 2px;
  gap: 3px;
}
.slots i {
  border-radius: 0;
}
.place .name {
  font-size: 10px;
}
.place .queue {
  color: #a34732;
}
#detail {
  border-radius: 3px;
  padding: 22px;
  border-top: 4px solid #35464a;
  box-shadow: 0 8px 25px #263b3b18;
}
#detail h3 {
  font-size: 23px;
  letter-spacing: -0.7px;
  line-height: 1.1;
  margin-top: 8px;
}
#detail p {
  font-size: 13px;
}
#detail button {
  background: transparent;
  font-size: 22px;
  padding: 0;
}
#detail .hint {
  font-size: 11px !important;
  border-top: 1px solid #30363820;
  padding-top: 12px;
}
dialog {
  background: #f7f7f0df;
}
dialog::backdrop {
  background: #edf0e08c;
  backdrop-filter: blur(9px);
}
#content {
  max-width: 860px;
  padding: 9vh 40px 40px;
}
dialog h2 {
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 750;
  letter-spacing: -2.8px;
  line-height: 1.05;
  margin: 12px 0 18px;
}
dialog p {
  font-size: 18px;
  line-height: 1.55;
  max-width: 690px;
}
.eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  font-size: 10px;
  font-weight: 750;
  color: #657276;
}
.lede {
  max-width: 600px;
}
.primary {
  border-radius: 4px;
  padding: 15px 22px;
  min-height: 48px;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.primary span {
  margin-left: 24px;
}
.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 0 #30363830;
}
.start-note {
  font-size: 11px;
  margin-left: 18px;
  color: #647478;
}
.journey {
  display: grid;
  grid-template-columns: 1fr 25px 1fr 25px 1fr;
  align-items: center;
  gap: 10px;
  margin: 28px 0 24px;
  padding: 20px 0;
  border-top: 1px solid #35464a25;
  border-bottom: 1px solid #35464a25;
}
.journey > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.journey img {
  width: 85px;
  height: 85px;
  object-fit: contain;
  margin: 0 0 10px -12px;
}
.journey b {
  font-size: 16px;
  letter-spacing: -0.4px;
}
.journey small {
  font-size: 12px;
  line-height: 1.5;
  max-width: 175px;
  margin-top: 5px;
  color: #5e6d70;
}
.journey > span {
  font-size: 25px;
  color: #83918c;
}
.walking-example {
  display: block;
  width: 64px;
  height: 85px;
  background: url('../assets/ui-people-walk.png') no-repeat 0 center;
  background-size: 256px 85px;
  margin-bottom: 10px;
}
.hint {
  line-height: 1.6 !important;
}
.choices {
  padding-bottom: 28px;
  border-bottom: 1px solid #35464a25;
}
.choice {
  border-radius: 3px;
  padding: 24px 10px;
  transition:
    transform 0.18s,
    background 0.18s;
}
.choice:hover {
  transform: translateY(-5px);
  background: #ffffff80;
}
.choice strong {
  font-size: 25px;
  letter-spacing: -0.8px;
  font-weight: 750;
}
.choice small {
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  color: #59676b;
}
.choice .disc {
  width: 116px;
  height: 116px;
  margin-bottom: 24px;
}
.disc .amount {
  font-weight: 750;
}
.peek {
  border-radius: 3px;
  border-bottom: 1px solid #35464a50;
  padding: 8px 3px;
  margin-top: 20px;
}
.big {
  letter-spacing: -4px;
  font-weight: 750;
}
#close {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 23px;
}
@media (max-width: 700px) {
  header {
    gap: 5px;
  }
  .brand {
    font-size: 18px;
  }
  header button {
    width: 29px;
    height: 29px;
  }
  #coach {
    font-size: 12px;
    padding: 9px 12px;
  }
  #content {
    padding: 65px 22px 28px;
  }
  dialog h2 {
    letter-spacing: -1.8px;
  }
  dialog p {
    font-size: 15px;
  }
  .eyebrow {
    font-size: 9px;
    letter-spacing: 1.3px;
  }
  .journey {
    grid-template-columns: 1fr 14px 1fr 14px 1fr;
    gap: 4px;
    margin: 20px 0;
    padding: 15px 0;
  }
  .journey img {
    width: 67px;
    height: 67px;
    margin-left: -8px;
  }
  .journey b {
    font-size: 12px;
  }
  .journey small {
    font-size: 11px;
  }
  .journey > span {
    font-size: 18px;
  }
  .walking-example {
    width: 50px;
    height: 67px;
    background-size: 200px 67px;
  }
  .start-note {
    display: block;
    margin: 12px 0;
  }
  .transport {
    padding-left: 10px;
  }
  dialog .choices {
    gap: 12px;
    margin-top: 24px;
  }
  .choice {
    padding: 16px 3px;
  }
  .choice strong {
    font-size: 19px;
  }
  .choice small {
    font-size: 14px;
  }
  .choice .disc {
    width: 90px;
    height: 90px;
  }
  .disc svg {
    width: 48px;
    height: 48px;
  }
  .primary {
    font-size: 14px;
  }
  #detail {
    top: 170px;
  }
  .choice:hover {
    transform: none;
  }
}
/* Optional explanations stay within their context and preserve the quiet map. */
.why {
  border-top: 1px solid #35464a30;
  margin: 18px 0;
  text-align: left;
}
.why summary {
  cursor: pointer;
  padding: 14px 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
  list-style-position: inside;
}
.why summary:focus-visible {
  outline: 3px solid #317d9f;
  outline-offset: 3px;
}
.why[open] summary {
  padding-bottom: 4px;
}
.why-body p {
  font-size: 16px;
  line-height: 1.6;
  margin: 12px 0;
}
.why-body a {
  color: #286a80;
  text-underline-offset: 3px;
}
.why-body .why-sources {
  font-size: 13px;
  line-height: 1.7;
}
.why-body b {
  font-weight: 700;
}
#detail {
  max-height: calc(100dvh - 285px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#detail .why-body p {
  font-size: 14px;
}
#detail .why summary {
  font-size: 14px;
}
#detail .why-sources {
  font-size: 12px;
}
#content > .why {
  max-width: 690px;
}
#content > .why + .primary {
  margin-top: 12px;
}
@media (max-width: 700px) {
  #detail {
    max-height: calc(100dvh - 290px);
    width: min(320px, calc(100vw - 24px));
  }
  .why-body p {
    font-size: 15px;
  }
  .why summary {
    font-size: 14px;
  }
}

/* October polish: a quiet map, strong silhouettes, and tactile game controls. */
:root {
  --ink: #303a3b;
  --paper: #fbfbf3;
  --blue: #397f92;
  --hairline: #35464a24;
}
button {
  -webkit-tap-highlight-color: transparent;
}
header {
  top: 24px;
  left: 28px;
  gap: 6px;
}
.brand {
  font-size: 27px;
  line-height: 1;
  margin-right: 16px;
  letter-spacing: -1.5px;
}
.brand small {
  display: block;
  font-size: 9px;
  letter-spacing: 1.8px;
  font-weight: 650;
  margin-top: 7px;
  color: #536d71;
}
header button {
  background: #fbfbf3d9;
  box-shadow: 0 2px 0 #36494c0f;
  transition:
    transform 150ms,
    background 150ms;
}
header button:hover {
  transform: translateY(-2px);
  background: var(--paper);
}
#weather {
  top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.day-clock {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(#c59c48 var(--day-progress), #35464a16 0);
}
.day-clock > span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #edf0df;
  color: #a57629;
  font-size: 25px;
}
.weather-copy {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 9px;
}
.weather-copy b {
  font-size: 20px;
  letter-spacing: -0.7px;
}
.weather-copy > span {
  font-size: 12px;
  font-weight: 500;
}
#weather small {
  grid-column: 1/-1;
  font-size: 12px;
  margin-top: 3px;
  color: #5a6b6d;
}
#vitals {
  top: 23px;
  right: 28px;
  min-width: 146px;
}
#cooled {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 7px;
}
#cooled b {
  font-size: 31px;
  line-height: 1;
  letter-spacing: -1.4px;
  font-variant-numeric: tabular-nums;
}
#cooled small {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
#emergency {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: #56686b;
}
.meter {
  width: 100%;
  background: #35464a14;
  margin-top: 8px;
  height: 3px;
  overflow: hidden;
}
#vitals.urgent #emergency {
  color: #ad4838;
  font-weight: 700;
}
#coach {
  top: 103px;
  padding: 10px 17px;
  max-width: min(580px, 80vw);
  border: 0;
  border-radius: 5px;
  background: #fbfbf3ed;
  box-shadow: 0 2px 0 #34484910;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
}
footer {
  bottom: 27px;
  padding: 17px 22px 27px;
  gap: 24px;
  border-radius: 18px;
  background: #fbfbf3eb;
  box-shadow:
    0 5px 0 #36494c0c,
    0 10px 32px #36494c0b;
  backdrop-filter: blur(8px);
}
#tools {
  gap: 25px;
}
.tool {
  width: 64px;
  height: 64px;
  border: 2px solid transparent;
  box-shadow: none;
  background: var(--ink);
  transition:
    transform 160ms,
    outline-color 160ms;
}
.tool svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.8;
}
.tool:not(:disabled):hover {
  transform: translateY(-3px);
}
.tool.active {
  border-color: var(--paper);
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  transform: translateY(-3px);
}
.tool .count {
  width: 28px;
  height: 28px;
  border-width: 3px;
  right: -7px;
  top: -7px;
  font-size: 14px;
  background: var(--paper);
}
.tool .label {
  top: 70px;
  font-size: 11px;
  font-weight: 650;
  color: #536164;
}
.tool.active .label {
  color: #28687c;
}
.tool:disabled {
  opacity: 0.36;
}
.transport {
  padding-left: 20px;
  gap: 6px;
}
.transport button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--hairline);
  background: transparent;
  font-size: 14px;
}
#pause {
  background: var(--ink);
  color: var(--paper);
  border: 0;
}
.is-paused #pause {
  background: var(--blue);
}
.place:focus-visible {
  outline-offset: 5px;
}
.place.empty {
  border-color: #65949ba1;
  background: #f7faf0a8;
  border-radius: 4px;
  color: #518791;
  transition: background 150ms;
}
.place.empty:hover {
  background: #ffffffd9;
}
.place .badge,
.place .name,
.place .queue {
  box-shadow: 0 1px 0 #31484915;
}
#detail {
  top: 160px;
  right: 28px;
  width: 285px;
  border: 1px solid #ffffffaa;
  border-top: 3px solid var(--blue);
  border-radius: 7px;
  background: #fbfbf3f7;
  padding: 23px;
  box-shadow: 0 8px 28px #283f4014;
}
#detail h3 {
  font-size: 25px;
  margin: 10px 0 18px;
}
#detail .site-counts {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 15px;
  font-variant-numeric: tabular-nums;
}
#detail button {
  width: 26px;
  height: 26px;
  line-height: 1;
}
#detail .eyebrow {
  font-size: 10px;
  color: var(--blue);
}
dialog {
  background: #fafbf4e8;
}
dialog::backdrop {
  background: #eaf0e565;
  backdrop-filter: blur(12px);
}
#content {
  max-width: 860px;
  padding: clamp(52px, 9vh, 100px) 42px 42px;
}
dialog h2 {
  font-size: clamp(39px, 5vw, 66px);
  line-height: 1.03;
  letter-spacing: -2.8px;
  margin: 18px 0 22px;
}
dialog .eyebrow {
  color: var(--blue);
  font-size: 11px;
  letter-spacing: 1.6px;
}
dialog .lede {
  font-size: 20px;
  color: #586568;
  max-width: 610px;
  line-height: 1.5;
}
.journey {
  margin: 32px 0 24px;
  padding: 20px 0 24px;
  border-top: 0;
  border-bottom: 1px solid var(--hairline);
  gap: 18px;
}
.journey > div {
  align-items: flex-start;
}
.journey img {
  width: 94px;
  height: 94px;
  margin-bottom: 15px;
}
.journey b {
  font-size: 17px;
}
.journey small {
  font-size: 13px;
  line-height: 1.5;
}
.walking-example {
  height: 94px;
  margin-bottom: 15px;
}
.primary {
  padding: 16px 24px;
  border-radius: 5px;
  background: var(--ink);
  box-shadow: 0 3px 0 #18282920;
}
.primary:hover {
  background: #3c5358;
}
.start-note {
  font-size: 12px;
}
dialog .choices {
  gap: 30px;
  margin-top: 30px;
  padding-bottom: 24px;
  border: 0;
}
.choice {
  position: relative;
  padding: 28px 18px 24px;
  border: 1px solid transparent;
  border-radius: 8px;
}
.choice:hover,
.choice:focus-visible {
  background: #ffffffa8;
  border-color: #3d596424;
  box-shadow: 0 6px 0 #36536209;
}
.choice .disc {
  width: 108px;
  height: 108px;
  margin-bottom: 22px;
  box-shadow: 4px 5px 0 #30424816;
}
.choice[data-choice='shade'] .disc {
  background: #477964;
}
.choice[data-choice='center'] .disc {
  background: #397f92;
}
.disc .amount {
  width: 39px;
  height: 39px;
  border-width: 4px;
  font-size: 21px;
  border-color: inherit;
  background: var(--paper);
}
.choice-category {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #647577;
  margin-bottom: 10px;
  font-weight: 700;
}
.choice strong {
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.8px;
  max-width: 260px;
  min-height: 58px;
}
.choice small {
  font-size: 16px;
  line-height: 1.8;
}
.why {
  border-color: var(--hairline);
}
.why summary {
  color: #42646c;
}
.why summary:hover {
  color: #1c5263;
}
.peek {
  font-size: 13px;
  color: #526c72;
  margin-top: 22px;
}
.big {
  font-size: 88px;
  color: var(--blue);
}
#close {
  width: 42px;
  height: 42px;
  top: 24px;
  right: 28px;
}
.credit {
  font-size: 10px;
  opacity: 0.8;
}
@keyframes panel-arrive {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
dialog[open] #content {
  animation: panel-arrive 220ms ease-out;
}
#detail:not([hidden]) {
  animation: panel-arrive 180ms ease-out;
}
@media (max-width: 900px) and (min-width: 701px) {
  header {
    left: 18px;
  }
  .brand {
    font-size: 23px;
    margin-right: 5px;
  }
  .brand small {
    font-size: 8px;
    letter-spacing: 1px;
  }
  header button {
    width: 31px;
    height: 31px;
  }
  #vitals {
    right: 18px;
    min-width: 125px;
  }
  #cooled b {
    font-size: 26px;
  }
  .weather-copy > span {
    display: none;
  }
}
@media (max-width: 700px) {
  header {
    top: 17px;
    left: 15px;
    gap: 4px;
  }
  .brand {
    font-size: 22px;
    margin-right: 7px;
  }
  .brand small {
    display: none;
  }
  header button {
    width: 29px;
    height: 29px;
  }
  #vitals {
    top: 16px;
    right: 15px;
    min-width: 110px;
  }
  #cooled b {
    font-size: 24px;
  }
  #cooled small {
    font-size: 10px;
  }
  #cooled {
    gap: 5px;
  }
  #emergency {
    font-size: 9px;
  }
  .meter {
    margin-top: 5px;
  }
  #weather {
    top: 66px;
    gap: 8px;
  }
  .day-clock {
    width: 33px;
    height: 33px;
    padding: 2px;
  }
  .day-clock > span {
    font-size: 19px;
  }
  .weather-copy b {
    font-size: 16px;
  }
  .weather-copy > span {
    font-size: 11px;
  }
  #weather small {
    font-size: 10px;
    margin-top: 1px;
  }
  #coach {
    top: 118px;
    max-width: calc(100% - 30px);
    width: max-content;
    font-size: 12px;
    padding: 9px 12px;
  }
  footer {
    bottom: 26px;
    padding: 13px 16px 24px;
    gap: 16px;
    border-radius: 13px;
  }
  #tools {
    gap: 20px;
  }
  .tool {
    width: 52px;
    height: 52px;
  }
  .tool svg {
    width: 25px;
    height: 25px;
  }
  .tool .label {
    top: 58px;
    font-size: 10px;
  }
  .tool .count {
    width: 24px;
    height: 24px;
    font-size: 12px;
    top: -6px;
    right: -6px;
  }
  .transport {
    padding-left: 13px;
    gap: 5px;
  }
  .transport button {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  #detail {
    top: 173px;
    right: 15px;
    width: min(310px, calc(100vw - 30px));
    padding: 20px;
    max-height: calc(100dvh - 305px);
  }
  #content {
    padding: 62px 23px 30px;
  }
  dialog h2 {
    font-size: 41px;
    letter-spacing: -1.8px;
    margin: 15px 0 18px;
  }
  dialog .eyebrow {
    font-size: 9px;
    letter-spacing: 1.2px;
  }
  dialog .lede {
    font-size: 16px;
  }
  .journey {
    gap: 5px;
    margin: 20px 0;
    padding: 12px 0 20px;
  }
  .journey img {
    width: 66px;
    height: 66px;
    margin-bottom: 12px;
  }
  .walking-example {
    height: 66px;
    margin-bottom: 12px;
  }
  .journey b {
    font-size: 12px;
  }
  .journey small {
    font-size: 11px;
  }
  dialog .choices {
    gap: 8px;
    margin-top: 23px;
  }
  .choice {
    padding: 19px 5px 14px;
  }
  .choice .disc {
    width: 84px;
    height: 84px;
    margin-bottom: 22px;
  }
  .choice strong {
    font-size: 19px;
    min-height: 44px;
  }
  .choice-category {
    font-size: 8px;
    letter-spacing: 0.9px;
  }
  .choice small {
    font-size: 14px;
  }
  .disc .amount {
    width: 32px;
    height: 32px;
    font-size: 17px;
  }
  .big {
    font-size: 72px;
  }
  #close {
    width: 34px;
    height: 34px;
    right: 18px;
    top: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
/* Keep both delivery choices and the city-preview control within a typical laptop. */
#content:has(.choices) {
  padding-top: clamp(36px, 6vh, 70px);
}
#content:has(.choices) .choices {
  margin-top: 20px;
  padding-bottom: 12px;
}
#content:has(.choices) .choice {
  padding-top: 20px;
  padding-bottom: 16px;
}
#content:has(.choices) .peek {
  margin-top: 12px;
}
@media (max-width: 380px) {
  header {
    left: 12px;
    gap: 3px;
  }
  .brand {
    font-size: 18px;
    margin-right: 4px;
  }
  header button {
    width: 26px;
    height: 26px;
  }
  #vitals {
    right: 12px;
    min-width: 96px;
  }
  #cooled b {
    font-size: 22px;
  }
}

/* Buildings are projected from metre-scale geometry through the map camera. */
.place {
  overflow: visible;
}
.projected-building {
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.place .badge,
.place .queue,
.place .name,
.place .slots {
  transform: translateX(-50%);
}

.place.empty {
  border: 0;
  background: transparent;
}