.chronicle {
  --record: #fdf8e9;
  --ink-soft: #536154;
  --history-gutter: 14px;
  --history-gap: 10px;
  padding-block-start: var(--history-gap);
}
.chronicle ::selection,
.chronicle-masthead ::selection {
  color: var(--ink);
  background: #e8ce94;
}
.chronicle input {
  caret-color: var(--pine);
}
.chronicle [hidden] {
  display: none !important;
}
.history-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.chronicle-masthead .masthead-inner {
  min-height: 68px;
  gap: 5px 16px;
  padding-block: 8px;
}
.chronicle-masthead h1 {
  font: 700 36px/1 var(--serif);
  letter-spacing: -0.035em;
}
.chronicle-edition,
.chronicle-deck {
  color: #dbe5cc;
  font-size: 13px;
}
.chronicle-deck {
  max-width: 40ch;
}
.chronicle-masthead .button {
  text-decoration: none;
}
.chronicle h2 {
  font: 700 26px/1.15 var(--serif);
  margin: 0;
}
.chronicle h3 {
  font: 700 18px/1.2 var(--serif);
}
.chronicle-caption,
.chronicle-clock-help {
  color: var(--ink-soft);
  font-size: 13px;
}
.chronicle-clock {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 14px;
  border: 1px solid var(--line);
  background: var(--record);
  padding: 5px var(--history-gutter);
}
.chronicle-date {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.chronicle-date > span {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
}
.chronicle-clock output {
  font: 700 19px/1.2 var(--mono);
}
.chronicle-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chronicle-actions .button {
  min-height: 42px;
}
.chronicle-actions svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.chronicle-play,
.chronicle-options summary {
  gap: 6px;
}
.chronicle-play .chronicle-pause-icon,
.chronicle-play[aria-pressed='true'] .chronicle-play-icon {
  display: none;
}
.chronicle-play[aria-pressed='true'] .chronicle-pause-icon {
  display: inline;
}
.chronicle-options {
  position: relative;
}
.chronicle-options summary {
  list-style: none;
}
.chronicle-options summary::-webkit-details-marker {
  display: none;
}
.chronicle-options[open] summary {
  background: #ebe6d6;
}
.chronicle-options-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 6px;
  width: min(240px, calc(100vw - 44px));
  padding: 10px;
  border: 1px solid #a5b398;
  background: var(--record);
  box-shadow: 0 6px 15px #26392a29;
}
.chronicle-options-panel .button {
  justify-content: start;
  text-align: left;
}
.chronicle-options-panel label {
  padding: 2px 2px 5px;
}
.chronicle-clock-details {
  display: grid;
  gap: 6px;
  padding: 6px var(--history-gutter);
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--record);
}
.chronicle-seek,
.chronicle-filters {
  display: flex;
  align-items: end;
  gap: 7px 10px;
  flex-wrap: wrap;
}
.chronicle-milestone {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 10px;
  font-size: 13px;
  color: var(--ink-soft);
}
.chronicle-milestone .button {
  min-height: 38px;
}
.chronicle label {
  display: grid;
  gap: 3px;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
}
.chronicle select,
.chronicle input {
  min-width: 0;
  max-width: 100%;
  min-height: 36px;
  border: 1px solid #a3ab91;
  border-radius: 3px;
  padding: 4px 7px;
  color: var(--ink);
  background: #fffdf4;
  font-size: 14px;
}
.chronicle-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--history-gap);
}
.chronicle-panel {
  min-width: 0;
  background: var(--record);
  border: 1px solid var(--line);
}
.chronicle-panel-head,
.chronicle-panel-body {
  padding: 10px var(--history-gutter);
}
.chronicle-panel-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 12px;
}
.chronicle-panel-title .chronicle-caption {
  font-size: 12px;
}
.chronicle-panel-title + #history-pilot {
  padding-top: 1px;
}
.chronicle-map {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1000 / 410;
  background-color: #c7d8cf;
  background-image:
    linear-gradient(#f7f8e34a 1px, transparent 1px),
    linear-gradient(90deg, #f7f8e34a 1px, transparent 1px);
  background-size: 10% 20%;
  border-block: 1px solid #a3b59d;
}
.chronicle-map > img,
.chronicle-map > svg,
#history-pins {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.chronicle-map svg text {
  font: 700 17px var(--mono);
  fill: #375345;
  paint-order: stroke;
  stroke: #f6f6df;
  stroke-width: 3px;
}
.chronicle-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.chronicle-pin::before,
.chronicle-key li::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--phase, #557f91);
  border-radius: 50%;
  border: 1px solid #ffffe8;
}
.chronicle-pin::before {
  box-shadow: 0 0 0 1px #384d42;
}
.chronicle-pin:is(:hover, :focus-visible, [aria-pressed='true']) {
  z-index: 2;
}
.chronicle-pin[aria-pressed='true']::before {
  box-shadow:
    0 0 0 2px #f8f5d9,
    0 0 0 4px #2c4c3b;
}
.chronicle [data-stage='building'] {
  --phase: #a56930;
}
.chronicle [data-stage='online'] {
  --phase: #447247;
}
.chronicle [data-stage='pilot'] {
  --phase: #664680;
}
.chronicle-key {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  padding: 8px 14px;
  list-style: none;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.chronicle-key li {
  display: flex;
  gap: 5px;
  align-items: center;
}
.chronicle-projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
  gap: 6px;
  padding: 8px 4px;
  max-height: 245px;
  overflow: auto;
}
.chronicle .button[aria-pressed='true'] {
  background: var(--pine);
  border-color: var(--pine);
  color: #fff9e8;
}
.chronicle-projects button {
  display: grid;
  align-content: start;
  gap: 3px;
  font-size: 12px;
  text-align: left;
}
.chronicle-projects button small {
  font-weight: 500;
}
.chronicle-record,
.chronicle-facts {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}
.chronicle-record p {
  margin-block: 4px;
}
.chronicle-record .eyebrow,
.chronicle-meta {
  color: var(--ink-soft);
}
.chronicle-meta {
  font-size: 12px;
}
.chronicle-metrics,
.chronicle-cash {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(135px, 100%), 1fr));
  gap: 6px;
  margin-block: 8px;
}
.chronicle-metrics > div,
.chronicle-cash > div {
  padding: 6px 8px;
  background: #efeada;
  border-left: 2px solid #a2b18b;
  overflow-wrap: anywhere;
}
.chronicle dt {
  font-size: 12px;
  color: var(--ink-soft);
}
.chronicle dd {
  margin: 1px 0;
  font: 700 14px/1.3 var(--mono);
}
.chronicle-costs {
  list-style: none;
  margin: 7px 0;
  padding: 0;
}
.chronicle-costs li {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--line);
  font-size: 13px;
}
.chronicle-costs strong {
  font-family: var(--mono);
}
.chronicle-timeline {
  margin-top: 12px;
}
.chronicle-filters {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.chronicle-filters output {
  color: var(--ink-soft);
  font: 700 12px var(--mono);
  padding-bottom: 8px;
}
.chronicle-event {
  border-bottom: 1px solid var(--line);
  padding: 7px 0;
}
.chronicle-event summary {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 5px 10px;
  padding: 5px;
  cursor: pointer;
}
.chronicle-event summary:hover {
  background: #edeedb;
}
.chronicle-event summary span {
  color: var(--ink-soft);
  font: 700 12px/1.5 var(--mono);
}
.chronicle-event .chronicle-record {
  margin: 1px 5px 5px;
}
.chronicle-source {
  font-size: 12px;
}
.chronicle .page-foot {
  margin-top: 12px;
}
.chronicle-command {
  margin-block: var(--history-gap);
  border: 1px solid #314c3d;
  background: #2c4539;
  color: #fff8e1;
}
.chronicle-command-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 5px var(--history-gutter);
}
.chronicle-command-head p {
  color: #dbe5cc;
  font-size: 12px;
}
.chronicle-command-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(82px, 1fr));
  gap: 0;
  margin: 0;
}
.chronicle-command-metrics > div {
  padding: 1px 8px;
  min-width: 0;
  border-inline-start: 1px solid #879875;
}
.chronicle-command-metrics dt {
  color: #ecf0ce;
}
.chronicle-command-metrics dd {
  font-size: 15px;
}
.chronicle-tabs {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid #829073;
  background: #829073;
}
.chronicle-tabs button {
  color: #1d3527;
  background: #f4f2df;
  font: 700 13px var(--body);
  min-height: 43px;
  padding: 4px;
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}
.chronicle-tabs button[aria-selected='true'] {
  background: #dde8ce;
  border-bottom-color: #8d642e;
}
.chronicle-tabs button:hover {
  background: #f9f1d6;
}
.chronicle-tabs button:focus-visible {
  position: relative;
  outline: 2px solid #a0642e;
  outline-offset: -3px;
}
@media (max-width: 790px) {
  .chronicle-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 1020px) {
  .chronicle-deck {
    display: none;
  }
  .chronicle-tabs {
    display: flex;
    flex-wrap: wrap;
  }
  .chronicle-tabs button {
    flex: 1 0 15%;
    min-width: 0;
  }
}
@media (max-width: 600px) {
  .chronicle {
    --history-gutter: 9px;
    --history-gap: 8px;
  }
  .chronicle-masthead .masthead-inner {
    flex-wrap: nowrap;
  }
  .chronicle-masthead h1 {
    font-size: 28px;
  }
  .chronicle-edition {
    font-size: 11px;
  }
  .chronicle-masthead .button {
    flex-shrink: 0;
    min-height: 44px;
    padding-inline: 7px;
    font-size: 11px;
  }
  .chronicle-clock output {
    font-size: 15px;
  }
  .chronicle-actions {
    gap: 4px;
  }
  .chronicle-actions .button {
    min-height: 44px;
    padding-inline: 8px;
    font-size: 12px;
  }
  .chronicle-options summary,
  .chronicle-play {
    width: 44px;
    padding: 0;
  }
  .chronicle-play > span,
  .chronicle-options summary > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .chronicle-event summary {
    grid-template-columns: minmax(0, 1fr);
  }
  .chronicle-tabs button {
    min-height: 44px;
    padding-inline: 2px;
    font-size: 12px;
    overflow-wrap: anywhere;
  }
  .chronicle-command-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }
  .chronicle-command-metrics > div {
    padding-inline: 6px;
  }
  .chronicle-command-metrics dd {
    font-size: 13px;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 440px) {
  .chronicle-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 360px) {
  .chronicle-masthead h1 {
    font-size: 23px;
  }
  .chronicle-clock {
    column-gap: 6px;
  }
  .chronicle-clock output {
    font-size: 14px;
  }
  .chronicle-tabs button {
    padding-inline: 1px;
    font-size: 11px;
  }
}
@media (pointer: coarse) {
  .chronicle .button,
  .chronicle select,
  .chronicle input {
    min-height: 44px;
  }
  .chronicle select,
  .chronicle input {
    font-size: 16px;
  }
  .chronicle-pin {
    width: 36px;
    height: 36px;
  }
}