/* Timeline: shared filters, the scaled overview and the dated list. Kinds keep a shape as well as a colour. */
.rw-timeline {
  --k-origin: light-dark(#2a78d6, #3987e5);
  --k-prediction: light-dark(#eb6834, #d95926);
  --k-event: light-dark(#1baf7a, #199e70);
  --k-interpretation: light-dark(#4a3aa7, #9085e9);
  margin-top: 24px;
  scroll-margin-top: 24px;
}
.k-origin {
  fill: var(--k-origin);
}
.k-prediction {
  fill: var(--k-prediction);
}
.k-event {
  fill: var(--k-event);
}
.k-interpretation {
  fill: var(--k-interpretation);
}
.tl-shape {
  width: 12px;
  height: 12px;
  flex: none;
}
.tl-form .tl-year {
  min-width: 110px;
  flex: 0 1 130px;
}
.tl-kinds {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 13px;
  flex-basis: 100%;
}
.tl-kinds legend {
  padding: 0;
  margin-bottom: 6px;
  float: left;
  width: 100%;
}
.tl-kinds label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.tl-kinds input {
  width: auto;
  margin: 0;
}
.tl-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
}
.tl-view {
  margin-top: 16px;
}
.tl-view svg {
  display: block;
  width: 100%;
  height: auto;
  touch-action: pan-y;
  user-select: none;
}
.tl-view text {
  fill: var(--muted);
  font-size: 11px;
}
.tl-view .tl-era {
  fill: var(--ink);
  font-size: 12px;
}
.tl-view .tl-axis {
  stroke: var(--line);
}
.tl-view .tl-grid {
  stroke: var(--line);
  stroke-dasharray: 2 4;
}
.tl-view .tl-hit {
  fill: transparent;
  cursor: crosshair;
}
.tl-view .tl-hit:hover {
  fill: var(--ink);
  fill-opacity: 0.06;
}
.tl-view .tl-brush {
  fill: var(--accent);
  fill-opacity: 0.12;
  stroke: var(--accent);
  pointer-events: none;
}
.tl-overview-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 18px;
  min-height: 1.6em;
  font-size: 13px;
  color: var(--muted);
}
.tl-overview-bar button {
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.tl-list {
  margin-top: 8px;
}
.tl-century {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper);
  margin: 28px 0 0;
  padding: 10px 0 8px;
  font-size: 20px;
  border-bottom: 1px solid var(--line);
}
.tl-entries {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tl-entry {
  display: grid;
  grid-template-columns: minmax(0, 12em) minmax(0, 1fr);
  gap: 4px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 64px;
}
.tl-entry:target {
  background: var(--panel);
}
.tl-when {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tl-what {
  min-width: 0;
}
.tl-what h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.tl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.tl-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tl-what details {
  margin-top: 6px;
  font-size: 14px;
}
.tl-what summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
}
.tl-what details p {
  max-width: 72ch;
  overflow-wrap: anywhere;
}
.tl-sources a {
  margin-right: 14px;
}
.tl-more {
  font: inherit;
  margin: 22px auto 0;
  display: block;
}
.tl-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  border-bottom: 1px solid var(--line);
  margin-top: 8px;
}
.tl-modes a {
  padding: 8px 0 10px;
  text-decoration: none;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tl-modes a:hover {
  color: var(--ink);
}
.tl-modes a[aria-current='page'] {
  color: var(--accent);
  border-color: var(--accent);
}
.tl-view-hint {
  max-width: 78ch;
  font-size: 14px;
  color: var(--muted);
  margin: 10px 0;
}
.tl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0;
}
.tl-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tl-view svg.tl-shape {
  width: 12px;
  height: 12px;
  flex: none;
}
.tl-view svg.tl-legend-arc {
  width: 24px;
  height: 10px;
  flex: none;
}
.tl-view .tl-mark {
  stroke: var(--paper);
  stroke-width: 1.5;
}
.tl-view .tl-life {
  stroke: var(--line);
  stroke-width: 2;
}
.tl-view .tl-span {
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.45;
}
.tl-span.k-origin {
  stroke: var(--k-origin);
}
.tl-span.k-prediction {
  stroke: var(--k-prediction);
}
.tl-span.k-event {
  stroke: var(--k-event);
}
.tl-span.k-interpretation {
  stroke: var(--k-interpretation);
}
.tl-arc {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: 0.6;
  stroke-width: 1.5;
}
.tl-arc-adopts,
.tl-arc-derives_from {
  stroke-dasharray: 5 3;
}
.tl-arc-responds_to {
  stroke-dasharray: 1.5 3;
  stroke-linecap: round;
}
.tl-arrowhead {
  fill: var(--ink);
  fill-opacity: 0.6;
}
.tl-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 6px;
}
.tl-toggle button {
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  background: var(--paper);
  border: 0;
  padding: 7px 14px;
  cursor: pointer;
}
.tl-toggle button[aria-pressed='true'] {
  color: var(--ink);
  background: var(--panel);
  font-weight: 600;
}
.tl-lane-row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.tl-lane-head {
  border-bottom: 0;
}
.tl-lane-name {
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 8px 0;
  cursor: pointer;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tl-lane-name::before {
  content: '▸ ';
  color: var(--muted);
}
.tl-lane-name[aria-expanded='true']::before {
  content: '▾ ';
}
.tl-lane-name small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.tl-lane-row.is-open {
  background: var(--panel);
}
.tl-ledger {
  list-style: none;
  margin: 0;
  padding: 8px 0 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.tl-ledger li {
  display: grid;
  grid-template-columns: minmax(0, 12em) minmax(0, 1fr);
  gap: 2px 18px;
  padding: 6px 12px;
}
.tl-ledger-when {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.tl-ledger-meta,
.tl-ledger-relation {
  grid-column: 2;
  font-size: 13px;
  color: var(--muted);
}
.tl-ledger-relation summary {
  cursor: pointer;
}
.tl-relation {
  border-left: 2px solid var(--line);
  padding-left: 12px;
  margin: 10px 0;
}
.tl-relation blockquote,
.tl-ledger-relation blockquote {
  margin: 6px 0;
  font-family: Georgia, serif;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.tl-relation-lead {
  font-weight: 600;
}
.tl-said-chart svg {
  max-height: 600px;
}
.tl-view .tl-diagonal {
  stroke: var(--muted);
  stroke-dasharray: 6 4;
}
.tl-view .tl-today {
  stroke: var(--accent);
}
.tl-view .tl-today-label {
  fill: var(--accent);
}
.tl-view .tl-whisker {
  stroke: var(--k-prediction);
  stroke-opacity: 0.45;
  stroke-width: 1.5;
}
.tl-view .tl-axis-title {
  fill: var(--ink);
  font-size: 12px;
}
.tl-view .tl-point:focus-visible .tl-hit,
.tl-view .tl-point:hover .tl-hit {
  fill: var(--ink);
  fill-opacity: 0.08;
}
.tl-view .tl-point:focus {
  outline: none;
}
.tl-chronicle-index {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 4px 18px;
}
.tl-chronicle-index a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 8px;
  text-decoration: none;
  font-size: 13px;
  padding: 4px 0;
}
.tl-chronicle-index a:hover .tl-chronicle-name {
  text-decoration: underline;
}
.tl-chronicle-count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tl-view .tl-chronicle-index svg {
  grid-column: 1 / -1;
  width: 100%;
  height: 8px;
}
@media (max-width: 700px) {
  .tl-entry {
    grid-template-columns: 1fr;
  }
  .tl-lane-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .tl-lane-head > span {
    display: none;
  }
  .tl-ledger li {
    grid-template-columns: 1fr;
  }
  .tl-ledger-meta,
  .tl-ledger-relation {
    grid-column: 1;
  }
  .tl-form label,
  .tl-form .query-field {
    flex: 1 1 100%;
    min-width: 0;
  }
  .tl-form .tl-year {
    flex: 1 1 40%;
  }
}

.relative-timing {
  border-top: 1px solid var(--line);
  margin-top: 48px;
  padding-top: 24px;
  scroll-margin-top: 24px;
}
.timing-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 40px;
}
.timing-results article {
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.timing-results h3 {
  margin: 6px 0 12px;
  font-size: 23px;
}
.timing-expression {
  font-weight: 600;
  color: var(--accent);
}
.timing-results blockquote {
  margin: 18px 0;
  white-space: pre-line;
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.timing-results p {
  max-width: 70ch;
}
.timing-reader,
.timing-evidence {
  display: inline-block;
  margin: 0 16px 10px 0;
  font-size: 13px;
}
.relative-timing .browse-filters {
  flex-wrap: wrap;
}
.relative-timing .browse-filters label {
  min-width: 0;
}
.timeline-jump {
  font-size: 14px;
}
@media (max-width: 700px) {
  .timing-results {
    grid-template-columns: 1fr;
  }
  .relative-timing .browse-filters {
    display: block;
  }
  .relative-timing .browse-filters label {
    display: block;
  }
}