.outside-in-feature {
  --oi-blue: #1f5f78;
  --oi-blue-soft: #eaf2f5;
  --oi-gold: #9a6b21;
  --oi-warning: #7a3415;
  border-top: 3px solid var(--ws-ink);
  margin-top: var(--ws-space-7);
  padding-top: var(--ws-space-6);
}

.outside-in-feature,
.outside-in-feature * {
  box-sizing: border-box;
}

.outside-in-feature :where(h2, h3, h4) {
  scroll-margin-top: 7rem;
}

.oi-feature-header,
.oi-section {
  border-bottom: 1px solid var(--ws-line);
  padding-bottom: var(--ws-space-7);
}

.oi-section {
  padding-top: var(--ws-space-7);
}

.oi-feature-header > h2,
.oi-section > h2 {
  max-width: 18ch;
}

.oi-lede {
  font-size: clamp(1.15rem, 2.3vw, 1.45rem);
  line-height: 1.5;
}

.oi-meta,
.oi-small,
.oi-control-status,
.oi-source-access,
.oi-candidate-meta {
  color: var(--ws-muted);
  font-family: var(--ws-font-interface);
  font-size: var(--ws-type-small);
}

.oi-interpretation,
.oi-coverage-note,
.oi-observatory-link {
  background: var(--oi-blue-soft);
  border-left: 4px solid var(--oi-blue);
  padding: var(--ws-space-4);
}

.oi-stat-grid,
.oi-metrics,
.oi-inline-metrics {
  display: grid;
  gap: 0;
  margin: var(--ws-space-5) 0;
}

.oi-stat-grid {
  border-block: 1px solid var(--ws-ink);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.oi-stat-grid > div {
  border-right: 1px solid var(--ws-line);
  min-width: 0;
  padding: var(--ws-space-4);
}

.oi-stat-grid > div:last-child {
  border-right: 0;
}

.oi-stat-grid dt,
.oi-metrics dt,
.oi-inline-metrics dt {
  color: var(--ws-muted);
  font-family: var(--ws-font-interface);
  font-size: var(--ws-type-small);
  font-weight: 600;
}

.oi-stat-grid dd {
  font-family: var(--ws-font-display);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  line-height: 1;
  margin: .35rem 0 0;
}

.oi-actions,
.oi-section-nav {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ws-space-3);
  margin-block: var(--ws-space-5);
}

.oi-section-nav {
  border-block: 1px solid var(--ws-line);
  font-family: var(--ws-font-interface);
  padding-block: var(--ws-space-3);
}

.oi-section-nav a {
  min-height: 44px;
  padding: .65rem .25rem;
}

.outside-in-feature :where(a, button, select, summary):focus-visible {
  outline: 3px solid var(--ws-focus);
  outline-offset: 3px;
}

.outside-in-feature details {
  border-top: 1px solid var(--ws-line);
  margin-block: var(--ws-space-5);
  padding-top: var(--ws-space-3);
}

.outside-in-feature summary {
  cursor: pointer;
  font-family: var(--ws-font-interface);
  font-weight: 700;
  min-height: 44px;
  padding-block: .65rem;
}

.oi-provenance dl,
.oi-download details dl {
  display: grid;
  gap: var(--ws-space-3);
}

.oi-provenance dl > div,
.oi-download details dl > div {
  border-top: 1px solid var(--ws-line);
  display: grid;
  gap: var(--ws-space-2);
  grid-template-columns: minmax(8rem, .45fr) minmax(0, 1fr);
  padding-top: var(--ws-space-2);
}

.oi-provenance dd,
.oi-download dd {
  margin: 0;
  min-width: 0;
}

.outside-in-feature code {
  overflow-wrap: anywhere;
}

.oi-chart {
  border-top: 2px solid var(--ws-ink);
  margin: var(--ws-space-5) 0;
  padding-top: var(--ws-space-3);
}

.oi-chart figcaption,
.oi-table caption {
  font-family: var(--ws-font-interface);
  font-weight: 700;
  text-align: left;
}

.oi-chart ul {
  display: grid;
  gap: var(--ws-space-3);
  list-style: none;
  padding: 0;
}

.oi-chart li {
  align-items: center;
  display: grid;
  gap: var(--ws-space-3);
  grid-template-columns: minmax(11rem, .8fr) minmax(10rem, 1fr) 3rem;
}

.oi-chart progress {
  accent-color: var(--oi-blue);
  height: 1.35rem;
  width: 100%;
}

.oi-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.oi-table {
  border-collapse: collapse;
  font-family: var(--ws-font-interface);
  font-size: .94rem;
  margin-block: var(--ws-space-5);
  min-width: 42rem;
  width: 100%;
}

.oi-table caption {
  padding-bottom: var(--ws-space-3);
}

.oi-table th,
.oi-table td {
  border-bottom: 1px solid var(--ws-line);
  padding: .75rem;
  text-align: left;
  vertical-align: top;
}

.oi-table th {
  background: var(--oi-blue);
  color: #fff;
  font-weight: 700;
}

.oi-table tbody tr:nth-child(even) {
  background: var(--oi-blue-soft);
}

.oi-stakeholder-table td:first-child {
  min-width: 8rem;
}

.oi-example-grid,
.oi-download-grid,
.oi-group-comparison,
.oi-theme-grid {
  display: grid;
  gap: var(--ws-space-4);
}

.oi-example-grid,
.oi-download-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block: var(--ws-space-5);
}

.oi-example,
.oi-download,
.oi-group-side,
.oi-theme-record {
  border: 1px solid var(--ws-line);
  min-width: 0;
  padding: var(--ws-space-4);
}

.oi-label,
.oi-warning-label,
.oi-added,
.oi-badge {
  display: inline-block;
  font-family: var(--ws-font-interface);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin: .15rem .25rem .15rem 0;
  padding: .2rem .4rem;
}

.oi-label,
.oi-added,
.oi-badge {
  background: var(--oi-blue-soft);
  color: var(--oi-blue);
}

.oi-warning-label,
.oi-badge-warn {
  background: #fff1e8;
  color: var(--oi-warning);
}

.oi-example-score,
.oi-between-score {
  align-items: baseline;
  display: flex;
  gap: .5rem;
}

.oi-example-score,
.oi-between-score strong {
  color: var(--oi-blue);
  font-family: var(--ws-font-display);
  font-size: 2rem;
}

.oi-example-score span,
.oi-between-score span {
  color: var(--ws-muted);
  font-family: var(--ws-font-interface);
  font-size: var(--ws-type-small);
}

.oi-no-overlap {
  color: var(--oi-blue);
  font-family: var(--ws-font-interface);
  font-weight: 700;
}

.oi-group-comparison,
.oi-theme-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.oi-inline-metrics,
.oi-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.oi-inline-metrics > div,
.oi-metrics > div {
  border-top: 1px solid var(--ws-line);
  padding: var(--ws-space-3);
}

.oi-inline-metrics dd,
.oi-metrics dd {
  font-family: var(--ws-font-display);
  font-size: 1.6rem;
  margin: .2rem 0 0;
}

.oi-inspector {
  border-top: 2px solid var(--ws-ink);
  margin-block: var(--ws-space-5);
  padding-top: var(--ws-space-4);
}

.oi-control-row,
.oi-control-grid {
  align-items: end;
  background: var(--oi-blue-soft);
  display: grid;
  gap: var(--ws-space-3);
  margin-bottom: var(--ws-space-4);
  padding: var(--ws-space-4);
}

.oi-control-row {
  grid-template-columns: minmax(0, 1fr) minmax(9rem, .5fr);
}

.oi-control-grid {
  grid-template-columns: minmax(14rem, 1fr) minmax(9rem, .35fr);
}

.oi-control-row label,
.oi-control-grid label {
  font-family: var(--ws-font-interface);
  font-weight: 700;
}

.oi-control-row select,
.oi-control-grid select {
  background: #fff;
  border: 1px solid var(--ws-ink);
  display: block;
  font: inherit;
  margin-top: .4rem;
  min-height: 44px;
  padding: .6rem;
  width: 100%;
}

.oi-control-status {
  grid-column: 1 / -1;
  margin: 0;
}

.oi-theme-record + .oi-theme-record,
.oi-group-example + .oi-group-example {
  margin-top: var(--ws-space-5);
}

.oi-score {
  color: var(--oi-blue);
  display: block;
  font-family: var(--ws-font-display);
  font-size: 1.45rem;
  font-weight: 700;
  margin-block: .25rem;
}

.oi-not-established {
  color: var(--ws-muted);
  font-style: italic;
  font-weight: 600;
}

.oi-candidate-meta,
.oi-source-access {
  display: block;
  margin-top: .25rem;
}

.oi-filetype {
  color: var(--oi-blue);
  font-family: var(--ws-font-interface);
  font-size: var(--ws-type-small);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.oi-download-link {
  align-items: center;
  border: 1px solid var(--ws-ink);
  display: inline-flex;
  font-family: var(--ws-font-interface);
  font-weight: 700;
  min-height: 44px;
  padding: .65rem .8rem;
  text-decoration: none;
}

.oi-sources ol {
  padding-left: 1.5rem;
}

.oi-sources li {
  margin-bottom: var(--ws-space-4);
}

@media (max-width: 48rem) {
  .oi-stat-grid,
  .oi-example-grid,
  .oi-download-grid,
  .oi-group-comparison,
  .oi-theme-grid,
  .oi-control-row,
  .oi-control-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .oi-stat-grid > div {
    border-bottom: 1px solid var(--ws-line);
    border-right: 0;
  }

  .oi-stat-grid > div:last-child {
    border-bottom: 0;
  }

  .oi-chart li {
    grid-template-columns: minmax(0, 1fr) 3rem;
  }

  .oi-chart li > span {
    grid-column: 1 / -1;
  }

  .oi-provenance dl > div,
  .oi-download details dl > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  .oi-control-row,
  .oi-control-grid {
    display: none;
  }

  .outside-in-feature [hidden] {
    display: block !important;
  }

  .oi-table-wrap {
    overflow: visible;
  }
}