/* Types of data center: the hub and the type pages. Nothing here applies outside these pages. */
.type-lede p { margin-bottom: 0; }
.type-naming { margin: 12px 0 0; }
.type-cite { font-size: .72em; line-height: 0; margin-left: 1px; }
.type-cite a { color: #166674; text-underline-offset: 2px; }
.type-scope { display: inline-block; padding: 1px 8px; border: 1px solid #c3d0da; border-radius: 999px; background: #fff; color: #33475a; font-size: .74rem; font-weight: 650; line-height: 1.6; white-space: nowrap; }
.type-scope--example { border-color: #8db4dc; background: #eef4fb; color: #1f4f80; }
.type-scope--type { border-color: #86bcae; background: #edf7f4; color: #1d5a4a; }
.type-untyped { padding: 14px 16px; border-left: 3px solid #247f8c; background: #eef5f7; font-size: .95rem; }
.article .type-untyped b { color: #07111f; }
.type-figure { margin: 28px 0 0; padding: 0; border: 1px solid #d5dde4; border-radius: 10px; background: #fff; overflow: hidden; }
.type-svg { display: block; width: 100%; height: auto; }
.type-svg text { font-family: var(--sans); }
.type-svg-flowlabel { font-size: 15px; font-weight: 750; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.type-svg-note { font-size: 13px; font-weight: 650; fill: #41566b; }
.type-svg a:focus-visible circle { stroke: #247f8c; stroke-width: 4px; }
.type-callout { cursor: pointer; }
.type-figure figcaption { padding: 12px 16px 14px; border-top: 1px solid #e3e9ee; color: #41566b; font-size: .9rem; line-height: 1.45; }
.type-key { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; color: #1d3347; font-weight: 650; white-space: nowrap; }
.type-key i { display: inline-block; width: 26px; border-top-width: 3px; }
.type-explorer { margin-top: 28px; }
.type-explorer h2 { margin-top: 0; }
.type-explorer .button { min-height: 44px; border-color: #7e929f; background: #fff; color: #1d3347; }
.type-explorer .button[hidden] { display: none; }
.type-explorer .button small { margin-left: 6px; font-weight: 500; font-size: .8rem; }
.type-3d-failure { padding: 10px 14px; border: 1px solid #d5dde4; background: #fff; }
.type-3d-view { margin-top: 8px; }
.type-3d-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid #0f2233; border-radius: 10px; background: #0a1522; }
.type-3d-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.type-3d-canvas:focus-visible { outline: 3px solid #247f8c; outline-offset: -3px; }
.type-3d-badges { position: absolute; inset: 0; pointer-events: none; }
.type-3d-badge { position: absolute; top: 0; left: 0; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 3px; border-radius: 999px; background: rgba(7, 17, 31, .9); color: #fff; font: 600 .74rem/1.25 var(--sans); white-space: nowrap; box-shadow: 0 0 0 1px rgba(255, 255, 255, .34); pointer-events: auto; cursor: pointer; }
.type-3d-badge b { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #e8f2f6; color: #07111f; font-size: .68rem; font-weight: 700; }
.type-3d-badge.is-dim, .type-3d-leader.is-dim { opacity: .42; }
.type-3d-leader { position: absolute; top: 0; left: 0; height: 1px; background: rgba(255, 255, 255, .62); transform-origin: 0 50%; pointer-events: none; }
.type-3d-motion-note { margin: 8px 0 0; color: #41566b; font-size: .84rem; }
.type-3d-badge.is-selected { background: #0f6c78; box-shadow: 0 0 0 2px #7fe6ef; z-index: 2; }
.type-3d-note { position: absolute; right: 8px; bottom: 6px; margin: 0; padding: 1px 8px; border-radius: 6px; background: rgba(7, 17, 31, .82); color: #d7e2ea; font-size: .78rem; font-weight: 650; pointer-events: none; }
.article .type-3d-note { color: #d7e2ea; font-size: .78rem; }
.type-3d-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.type-3d-tool, .type-3d-part, .type-show { min-height: 44px; padding: 6px 12px; border: 1px solid #9fb0bf; border-radius: 8px; background: #fff; color: #1d3347; font: 600 .86rem/1.25 var(--sans); cursor: pointer; }
.type-3d-tool[aria-pressed="true"], .type-3d-part[aria-pressed="true"] { border-color: #247f8c; background: #e6f3f5; }
.type-3d-tool:focus-visible, .type-3d-part:focus-visible, .type-show:focus-visible { outline: 3px solid #247f8c; outline-offset: 2px; }
.type-3d-status { min-height: 1.6em; margin: 12px 0 0; }
.type-3d-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 10px; }
.type-3d-part { display: flex; align-items: center; gap: 8px; text-align: left; }
.type-3d-number, .type-num { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #07111f; color: #fff; font: 700 .76rem/1 var(--sans); }
.article ol.type-parts { list-style: none; margin: 12px 0 0; padding: 0; }
.article ol.type-parts > li { display: flex; gap: 12px; margin: 0; padding: 12px 8px; border-top: 1px solid #e0e7ed; scroll-margin-top: 90px; }
.type-parts > li:target, .type-parts > li.is-selected { background: #e6f3f5; }
.type-part-body { min-width: 0; }
.type-guide-link { display: inline-block; margin-left: 2px; font-size: .84rem; color: #166674; }
.type-show { display: block; margin-top: 8px; }
.article ol.type-path { margin: 12px 0 0; padding-left: 1.3em; }
.article ol.type-path > li, .type-section-list > li, .type-differs > li { margin-bottom: 12px; }
.type-refs { display: inline-block; color: #4a5c6e; font-size: .86rem; }
.type-source-class { font-weight: 600; }
.article ol.type-sources { padding-left: 1.3em; font-size: .92rem; }
.type-sources > li { scroll-margin-top: 90px; }
.type-table-wrap { margin-top: 12px; }
.type-hub-table { width: 100%; border-collapse: collapse; background: #fff; }
.type-hub-table caption { padding: 0 0 8px; color: #566779; font-size: .84rem; text-align: left; }
.type-hub-table th, .type-hub-table td { padding: 12px; border: 1px solid #d8e0e7; text-align: left; vertical-align: top; font-size: .94rem; }
.type-hub-table thead th { background: #14243a; color: #d7e2ec; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.type-covered { margin-top: 18px; }
.article ul.type-closer { padding-left: 1.2em; }
@media (max-width: 640px) {
  .type-3d-stage { aspect-ratio: 1 / 1.22; }
  .type-3d-leader { background: rgba(255, 255, 255, .42); }
  .article .type-3d-note, .type-3d-note { font-size: .66rem; }
  .type-3d-badge { padding: 1px 6px 1px 2px; font-size: .66rem; gap: 3px; }
  .type-3d-badge b { width: 15px; height: 15px; font-size: .6rem; }
  .type-hub-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .type-hub-table, .type-hub-table tbody, .type-hub-table tr, .type-hub-table th, .type-hub-table td { display: block; width: 100%; box-sizing: border-box; }
  .type-hub-table tr { margin-bottom: 10px; border: 1px solid #d8e0e7; }
  .type-hub-table th, .type-hub-table td { border: 0; padding: 8px 12px; }
  .type-svg .type-callout circle, .type-svg .type-callout text { transform-box: fill-box; transform-origin: center; transform: scale(1.55); }
  .type-3d-parts { grid-template-columns: 1fr; }
  .type-scope { white-space: normal; }
}