.world-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--history-gap);
}
.world-workspace > div {
  min-width: 0;
}
#history-world-dispatch {
  grid-column: 1 / -1;
}
#history-world-inspector {
  scroll-margin-top: 8px;
}
.chronicle-map:has(.world-pin-label) > svg text {
  display: none;
}
.world-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
}
.world-pin::before {
  content: '';
  width: 13px;
  height: 13px;
  border: 2px solid #f7f5d9;
  background: #385f4a;
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px #29473a;
}
.world-pin[data-site-phase='plot']::before {
  background: #425365;
}
.world-pin[data-site-phase='building']::before,
.world-pin[data-site-phase='queued']::before {
  background: #985c29;
}
.world-pin[aria-pressed='true']::before {
  box-shadow:
    0 0 0 2px #263e33,
    0 0 0 4px #e5bf72;
}
.world-pin:is(:hover, :focus-visible, [aria-pressed='true']) {
  z-index: 3;
}
.world-pin-label {
  position: absolute;
  top: calc(50% + 11px);
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 6px;
  border: 1px solid #f2f0d9;
  background: #2e483d;
  color: #fff8e4;
  font: 700 clamp(10px, 1.3vw, 13px)/1.2 var(--body);
  white-space: nowrap;
}
.world-pin[aria-pressed='true'] .world-pin-label {
  border-color: #6f4e21;
  background: #f1daa2;
  color: #342818;
}
.chronicle-key #history-world-key::before {
  border-radius: 0;
  transform: rotate(45deg);
  background: #385f4a;
}

.world-sites,
.world-bills,
.world-route-board,
.world-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(136px, 100%), 1fr));
  gap: 6px;
}
.world-sites {
  margin-block-end: 9px;
}
.world-location {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 2px;
  min-width: 0;
  min-height: 50px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  background: var(--sheet);
  color: var(--ink);
  text-align: left;
}
.world-location:hover {
  background: #ebefdb;
}
.world-location[aria-pressed='true'] {
  border-color: #67856d;
  background: #e6edd9;
}
.world-location span,
.world-location small {
  color: var(--ink-soft);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.world-location strong {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.world-location .world-location-economics {
  display: grid;
  gap: 1px;
  width: 100%;
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.world-location-economics b {
  color: var(--ink);
}
.world-location[data-site-phase='online'] .world-location-phase {
  color: #24543c;
  font-weight: 700;
}
.world-location:is([data-site-phase='building'], [data-site-phase='queued']) .world-location-phase {
  color: #794518;
  font-weight: 700;
}
.world-location .world-location-jobs {
  margin-top: 2px;
  padding: 2px 4px;
  background: #2e4d3e;
  color: #fff8e4;
  font-size: 11px;
  font-weight: 700;
}
.world-site .office-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px 10px;
  padding-bottom: 10px;
}
.world-site .office-heading h2 {
  margin-top: 0;
}
.world-state {
  max-width: 16ch;
  padding: 4px 7px;
  background: var(--office-light);
  color: #254839;
  font-size: 12px;
  font-weight: 700;
}
.world-state:is([data-site-phase='building'], [data-site-phase='queued']) {
  background: #f3e2b4;
  color: #643e18;
}
.world-decision {
  padding: 9px 10px;
  border: 1px solid var(--office-line);
  background: var(--office-light);
  font-size: 13px;
}
.world-build {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  flex-wrap: wrap;
}
.world-build strong {
  font-family: var(--mono);
}
.world-build .button:not(:disabled) {
  background: var(--pine);
  border-color: var(--pine);
  color: #fff8e4;
}
.world-build .button:not(:disabled):hover {
  background: var(--forest);
  border-color: var(--forest);
}
.world-upgrades {
  padding: 7px 0;
  border-block-start: 1px solid var(--line);
}
.world-upgrades summary {
  min-height: 44px;
  padding-block: 10px;
  font-weight: 700;
}
.world-upgrades .campus-upgrades {
  margin-block: 8px;
}
.world-route-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.world-actions p,
.world-site .button + p {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 12px;
}
.world-actions .button,
.world-site .button {
  white-space: normal;
}
.world-dispatch-total {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 18px;
  padding: 9px 12px;
  border: 1px solid var(--office-line);
  background: var(--office-light);
  font-size: 13px;
}
.world-dispatch-total strong {
  font-family: var(--mono);
}
.world-bills {
  grid-template-columns: repeat(auto-fit, minmax(min(205px, 100%), 1fr));
}
.world-platform {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding-block: 12px;
  border-block: 1px solid var(--line);
  scroll-margin-top: 8px;
}
.world-platform-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}
.world-platform-head h3,
.world-platform-head h4 {
  margin-bottom: 2px;
}
.world-platform-total {
  font-variant-numeric: tabular-nums;
}
.world-platform-work {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding-block: 9px 2px;
  border-block-start: 1px solid var(--line);
}
.world-platform-preference {
  padding: 2px 6px;
  background: var(--office-light);
  color: #254839;
  font-size: 12px;
  font-weight: 700;
}
.world-platform-preference[data-queued='true'] {
  background: #f3e2b4;
  color: #643e18;
}
.world-platform-stats {
  grid-template-columns: repeat(auto-fit, minmax(min(125px, 100%), 1fr));
}
.world-platform-impact {
  padding: 6px 8px;
  background: var(--office-light);
  font-size: 13px;
}
.world-platform-impact small {
  display: block;
  color: var(--ink-soft);
}
.world-platform-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 12px;
}
.world-platform-controls details {
  flex: 1 1 245px;
  min-width: 0;
}
.world-platform-controls summary {
  min-height: 44px;
  padding-block: 9px;
  font-weight: 700;
}
.world-platform-controls .button,
.world-platform-cloud .button {
  min-height: 44px;
  white-space: normal;
}
.world-platform-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(142px, 100%), 1fr));
  gap: 8px;
}
.world-platform-choices .button {
  width: 100%;
}
.world-platform-choices p {
  margin-top: 3px;
  color: var(--ink-soft);
  font-size: 12px;
}
.world-platform-cloud {
  padding: 8px 10px;
  border: 1px solid var(--office-line);
  background: var(--office-light);
}
.world-platform-cloud .office-rows > div {
  grid-template-columns: minmax(0, 1fr) max-content;
}
.world-platform-cloud dd {
  max-width: 150px;
}
.world-platform-cloud small {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
}
@media (max-width: 790px) {
  .world-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 540px) {
  .world-sites {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .world-location {
    padding-inline: 5px;
    line-height: 1.35;
  }
  .world-location > strong {
    font-size: 13px;
  }
  .world-location span,
  .world-location small {
    font-size: 11px;
  }
  .world-pin-label {
    padding: 1px 4px;
  }
  .world-build > div,
  .world-build .button {
    width: 100%;
  }
  .world-route-board {
    grid-template-columns: minmax(0, 1fr);
  }
  .world-platform-stats {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  .world-platform-stats dd,
  .world-platform-cloud dd {
    font-size: 13px;
  }
  .world-platform-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .world-platform-controls > .button {
    width: 100%;
  }
}
@media (pointer: coarse) {
  .world-pin {
    width: 44px;
    height: 44px;
  }
}