/* Adapters page: layout and spacing only. Type, color and rules come from landing.css. */

.center { text-align: center; }
.center h2, .center .sub { margin-left: auto; margin-right: auto; }

.ahero { padding: 56px 0 32px; text-align: center; }
.ahero h1, .ahero .lede { margin-left: auto; margin-right: auto; }

.summary { margin: 20px auto 0; font: 15px/1.4 var(--sans); letter-spacing: .02em; color: var(--muted); font-variant-numeric: tabular-nums; }
.summary span { color: var(--ink); font-weight: 600; }

.find { max-width: 640px; margin: 36px auto 0; text-align: left; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.find-box { position: relative; }
.find-icon { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.find input { width: 100%; height: 48px; padding: 0 14px 0 44px; text-overflow: ellipsis; border: 1px solid var(--muted); border-radius: 0; font: 18px/1 var(--serif); color: inherit; background: transparent; }
@media (max-width: 480px) { .find input { font-size: 16px; } }
.find input:focus { outline: 2px solid var(--link); outline-offset: 1px; }
#adapter-shown { min-height: 1.5em; margin: 8px 0 0; text-align: center; font: 14px/1.5 var(--sans); color: var(--muted); }
.explain { margin: 12px auto 0; max-width: 40em; }
.explain .tested { display: block; margin-top: 4px; font: 13px/1.5 var(--sans); color: var(--muted); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ki { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }

.legend-kinds { max-width: 1000px; margin: 48px auto 0; padding-top: 32px; border-top: 1px solid var(--line); text-align: center; }
.lk-head { max-width: 22em; margin: 10px auto 0; font-size: clamp(24px, 3vw, 30px); line-height: 1.2; }
.lk-sub { max-width: 40em; margin: 10px auto 0; font: 15px/1.5 var(--sans); color: var(--muted); }
.kind-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; margin: 24px 0 0; text-align: left; }
.kl { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); }
.kl .ki { margin-top: 1px; }
.kl dt { font: 600 15px/1.3 var(--sans); }
.kl dd { margin: 4px 0 0; font: 14px/1.45 var(--sans); color: var(--muted); }
@media (max-width: 900px) { .kind-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kind-legend { grid-template-columns: 1fr; } .kl { padding: 10px 0; } }

.fieldbar { position: sticky; top: 58px; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.fieldbar .wrap { max-width: 1280px; }
.chips { display: flex; justify-content: safe center; gap: 18px; padding: 0; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; white-space: nowrap; padding: 11px 0 9px; border-bottom: 2px solid transparent; font: 14px/1.2 var(--sans); color: var(--ink); text-decoration: none; }
.chip:hover { color: var(--ink); border-bottom-color: var(--line); }
.chip b { margin-left: 4px; font-weight: 400; }
.chip.on { border-bottom-color: var(--c); }
.chip.empty { opacity: .45; }
.chip[hidden] { display: none; }

.fsec { padding: 48px 0; scroll-margin-top: 116px; }
.fsec + .fsec { border-top: 1px solid var(--line); }
.fsec[hidden] { display: none; }
.fsec-grid { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.fsec-aside { position: sticky; top: 136px; }
.fig { margin: 0 0 16px; }
.fig img { width: 100%; height: auto; aspect-ratio: 1; }
.fig figcaption { margin-top: 8px; }
.fsec h2 { margin: 0 0 8px; }
.fdesc { margin: 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 0 24px; align-items: stretch; }
.cards-note { grid-column: 1 / -1; margin: 0; }

@media (max-width: 860px) {
  .fsec { padding: 36px 0; }
  .fsec-grid { grid-template-columns: 1fr; gap: 16px; }
  .fsec-aside { position: static; }
  .fig { max-width: 200px; }
}

.ad { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 10px; min-width: 0; padding: 16px 0 20px; border-top: 1px solid var(--line); }
.ad[hidden] { display: none; }
.ad > * { min-width: 0; margin: 0; }
.ad-kind { display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ad-kind .ki { width: 22px; height: 22px; color: var(--ink); }
.ad h3 { margin: 0; font-size: 21px; line-height: 1.25; overflow-wrap: anywhere; }
.ad-area { margin: 2px 0 0; font: 13px/1.4 var(--sans); color: var(--muted); }
.ad-desc { font-size: 16px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.ad-facts { display: grid; gap: 8px; align-self: start; padding-top: 10px; border-top: 1px solid var(--line); }
.ad-facts > div { min-width: 0; }
.ad-facts dt { font: 600 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ad-facts dd { margin: 3px 0 0; font: 14px/1.4 var(--sans); overflow-wrap: anywhere; }
.ad-facts .ad-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ad-facts .ad-pair div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.ad-ver, .ad-none { color: var(--muted); }
.ad-cites { align-self: start; font: 14px/1.45 var(--sans); }
.ad-cites summary { cursor: pointer; }
.ad-cites ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.ad-cites li { overflow-wrap: anywhere; }
.fcount { margin: 8px 0 0; font: 13px/1.4 var(--sans); color: var(--muted); }
.ad-link { align-self: end; font: 14px/1.4 var(--sans); }

.none { padding: 40px 16px; text-align: center; }

.path { min-width: 0; }
.links { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 6px; }


.chip [data-chip-count] { display: none; }

/* Stronger mark for the current field */
.chip { color: var(--muted); border-bottom-width: 3px; padding: 12px 2px 9px; transition: color .15s, border-color .15s; }
.chip:hover { color: var(--ink); }
.chip.on { color: var(--ink); font-weight: 700; border-bottom-color: var(--c); }

/* Readability audit fixes */
.chip.empty { opacity: 1; color: var(--muted); }
.ad-desc { -webkit-line-clamp: unset; line-clamp: unset; display: block; overflow: visible; }
@media (max-width: 760px) { .ad-link, .links a, .cta a { display: inline-block; padding-block: 10px; } }

/* Add your own adapter */
.trust { display: grid; gap: 0; margin: 12px 0 0; }
.trust > div { padding: 12px 0; border-top: 1px solid var(--line); }
.trust dt { font: 600 15px/1.3 var(--sans); }
.trust dd { margin: 4px 0 0; font: 14px/1.45 var(--sans); color: var(--muted); }

/* Cards: one column of parts, so the citations list cannot overlap the next card */
.ad { display: flex; flex-direction: column; gap: 10px; grid-row: auto; grid-template-rows: none; }
.ad-facts { margin-top: auto; }
.ad-cites summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); list-style: none; }
.ad-cites summary::-webkit-details-marker { display: none; }
.ad-cites summary::before { content: "+"; font-weight: 700; }
.ad-cites[open] summary::before { content: "\2212"; }
.ad-cites summary:hover { color: var(--ink); border-color: var(--ink); }
.ad-cites[open] { padding-bottom: 4px; }