* { box-sizing: border-box; }

:root {
  color-scheme: light dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

body { margin: 0; }

main {
  width: min(72rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2.5rem 0 5rem;
}

a { overflow-wrap: anywhere; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: .2rem solid currentColor;
  outline-offset: .18rem;
}

.skip-link {
  position: absolute;
  top: .5rem;
  left: .5rem;
  transform: translateY(-200%);
  background: Canvas;
  color: CanvasText;
  border: 2px solid currentColor;
  padding: .55rem .75rem;
  z-index: 20;
}
.skip-link:focus { transform: none; }

.site-header { max-width: 68rem; }

.eyebrow,
.section-kicker,
.branch-label,
.diagnostic-state {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .74rem;
  font-weight: 800;
}

h1 {
  margin: .2rem 0 .7rem;
  font-size: clamp(2.4rem, 7vw, 4.8rem);
  line-height: 1;
  letter-spacing: -.035em;
}

h2 {
  margin: .15rem 0 .55rem;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  line-height: 1.1;
}

h3 { margin: .1rem 0 .35rem; }

.lede {
  max-width: 56rem;
  margin-bottom: 1rem;
  font-size: 1.08rem;
}

.meta-line,
.context-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1rem;
  font-size: .88rem;
}

.meta-line {
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  padding: .65rem 0;
}

.view-bar {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1rem;
}

.task-switcher,
.branch-switcher,
.family-switcher,
.change-selector {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

button {
  min-height: 2.65rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .48rem .78rem;
  background: Canvas;
  color: CanvasText;
  cursor: pointer;
}

button[aria-pressed="true"] {
  border-width: 2px;
  font-weight: 800;
}

.expert-entry {
  opacity: .78;
}

.view-panel {
  margin-top: 2.25rem;
}

.section-title {
  max-width: 58rem;
  margin-bottom: 1rem;
}

.section-title p:last-child {
  margin-bottom: 0;
}

.lineage-spine {
  display: grid;
  gap: .75rem;
}

.predecessor-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}

.act-chip {
  border: 1px solid currentColor;
  border-radius: .5rem;
  padding: .55rem .7rem;
  display: grid;
  gap: .1rem;
}

.act-chip span {
  font-size: .84rem;
  opacity: .82;
}

.destination {
  margin-top: .2rem;
  font-size: .72rem !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .035em;
}

.core-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

.core-card {
  border: 2px solid currentColor;
  border-radius: .65rem;
  padding: .85rem 1rem;
}

.core-card p { margin: .25rem 0; }

.citation,
.scope-line {
  font-size: .9rem;
}

.transition-note,
.coverage-line,
.local-notice {
  border-left: .22rem solid currentColor;
  padding-left: .8rem;
}

.transition-note {
  margin: .15rem 0 0;
  font-size: .9rem;
}

.overview-block {
  border-top: 1px solid currentColor;
  margin-top: 1.4rem;
  padding-top: 1rem;
}

.block-heading,
.family-title,
.change-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
}

.layer-list,
.relation-list,
.queue-list,
.diagnostic-list {
  list-style: none;
  margin: .7rem 0 0;
  padding: 0;
}

.layer-list {
  display: grid;
  gap: .45rem;
}

.layer-list li {
  display: grid;
  grid-template-columns: minmax(13rem, .8fr) 1.4fr;
  gap: 1rem;
  border-bottom: 1px solid currentColor;
  padding: .45rem 0;
}

.layer-list span { opacity: .82; }

.context-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .7rem;
}

.context-rows p {
  margin: .2rem 0;
}

.coverage-line {
  margin-top: 1.2rem;
  font-size: .88rem;
}

.context-strip {
  border: 1px solid currentColor;
  border-radius: .5rem;
  padding: .5rem .7rem;
  margin-bottom: 1rem;
}

.explore-tools {
  display: grid;
  gap: .65rem;
  margin-bottom: .6rem;
}

.status-line {
  margin: .35rem 0 .8rem;
  font-size: .9rem;
  opacity: .82;
}

.family-panel {
  border-top: 1px solid currentColor;
  padding-top: .85rem;
}

.family-panel[hidden],
.change-case[hidden],
.view-panel[hidden] {
  display: none;
}

.family-title p {
  margin: .2rem 0 0;
  font-size: .9rem;
  opacity: .82;
}

.relation-list {
  border-top: 1px solid currentColor;
}

.relation-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid currentColor;
}

.relation-list > li.is-context {
  opacity: .42;
}

.relation-list > li > div:first-child {
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr);
  gap: .45rem .6rem;
  align-items: baseline;
}

.branch-badge {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .08rem .38rem;
  font-size: .69rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .035em;
  width: fit-content;
}

.row-actions {
  display: flex;
  gap: .65rem;
  align-items: start;
  white-space: nowrap;
}

details summary {
  cursor: pointer;
  font-weight: 750;
}

.row-actions details {
  white-space: normal;
  max-width: 27rem;
}

.row-actions details p {
  margin: .45rem 0 0;
  font-size: .88rem;
}

.code-note {
  opacity: .72;
}

.local-notice {
  margin-top: .8rem;
  font-size: .88rem;
}

.change-selector {
  margin-bottom: .55rem;
}

.change-case {
  border-top: 1px solid currentColor;
  padding-top: .8rem;
}

.change-heading > div {
  display: grid;
  gap: .15rem;
}

.change-heading span {
  font-size: .9rem;
  opacity: .82;
}

.queue-list {
  border-top: 1px solid currentColor;
}

.queue-list li {
  display: grid;
  grid-template-columns: 9.5rem minmax(12rem,.8fr) 1.4fr auto;
  gap: .7rem;
  align-items: baseline;
  padding: .68rem 0;
  border-bottom: 1px solid currentColor;
}

.queue-label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.queue-list li > span:nth-of-type(2) {
  font-size: .9rem;
}

.queue-muted { opacity: .72; }
.queue-stop { border-left: .2rem dashed currentColor; padding-left: .65rem !important; }

.queue-list details {
  max-width: 26rem;
}

.queue-list details p {
  margin: .4rem 0 0;
  font-size: .86rem;
}

.diagnostic-list {
  border-top: 1px solid currentColor;
}

.diagnostic-list li {
  display: grid;
  grid-template-columns: 10.5rem minmax(14rem,.8fr) 1.3fr auto;
  gap: .7rem;
  align-items: baseline;
  padding: .7rem 0;
  border-bottom: 1px solid currentColor;
}

.diagnostic-list li > span:nth-of-type(2) {
  font-size: .9rem;
}

.method-note {
  margin-top: 1rem;
  max-width: 58rem;
}

.source-baseline {
  border-top: 1px solid currentColor;
  margin-top: 1.2rem;
  padding-top: .8rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: baseline;
}

.source-baseline h3 {
  width: 100%;
}

@media (max-width: 58rem) {
  .predecessor-row,
  .core-grid,
  .context-rows {
    grid-template-columns: 1fr;
  }

  .block-heading,
  .family-title,
  .change-heading {
    display: grid;
  }

  .layer-list li,
  .relation-list > li,
  .queue-list li,
  .diagnostic-list li {
    grid-template-columns: 1fr;
    gap: .25rem;
  }

  .relation-list > li > div:first-child {
    grid-template-columns: auto 1fr;
  }

  .relation-list > li > div:first-child > span:last-child {
    grid-column: 1 / -1;
  }

  .row-actions {
    white-space: normal;
    flex-wrap: wrap;
  }
}

@media (max-width: 38rem) {
  main {
    width: min(100% - 1rem, 72rem);
    padding-top: 1.5rem;
  }

  .view-bar {
    display: grid;
  }

  .task-switcher,
  .branch-switcher,
  .family-switcher,
  .change-selector {
    display: grid;
  }

  button {
    width: 100%;
    text-align: left;
  }
}