/* endpoints.html: demo endpoint inventory with live status checks. */
.ep-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }
.ep-controls .hub-button { cursor: pointer; font-family: inherit; }
.ep-controls .hub-button:disabled { cursor: progress; opacity: .7; }
.ep-summary { margin: 0; color: var(--night-ink); font: 600 13px "Geist Mono", monospace; }
.ep-sources { max-width: 760px; margin: 18px 0 0; color: var(--night-muted); font-size: 13px; line-height: 1.6; }
.ep-sources a, .ep-legend a, .ep-gaps a, .ep-table a { color: var(--cyan); text-underline-offset: 2px; }
.ep-legend-section { padding-top: 0; padding-bottom: 40px; }
.ep-h3 { margin: 34px 0 12px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.ep-legend-section .ep-h3 { margin-top: 0; }
.ep-legend { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--night-muted); font-size: 13px; line-height: 1.55; }
.ep-legend .ep-pill { margin-right: 8px; }

.ep-family { max-width: 1320px; margin: 0 auto; padding: 34px 32px 10px; }
.ep-family h2 { margin: 0 0 4px; font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -.04em; }
.ep-family > p { margin: 0 0 16px; color: var(--night-muted); font-size: 14px; }
.ep-scroll { overflow-x: auto; border: 1px solid var(--night-line); background: var(--night-panel); }
.ep-scroll:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.ep-table { width: 100%; min-width: 1060px; border-collapse: collapse; font-size: 13px; }
.ep-table caption { padding: 0; text-align: left; }
.ep-table th, .ep-table td { padding: 13px 14px; border-bottom: 1px solid var(--night-line); text-align: left; vertical-align: top; }
.ep-table thead th { background: var(--honua-bg); color: var(--night-muted); font: 700 10px "Geist Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.ep-table tbody tr:last-child th, .ep-table tbody tr:last-child td { border-bottom: 0; }
.ep-table tbody th { width: 15%; font-size: 14px; font-weight: 600; }
.ep-table .ep-method { display: inline-block; margin-top: 6px; padding: 1px 5px; border: 1px solid var(--night-line); color: var(--night-muted); font: 700 10px "Geist Mono", monospace; }
.ep-keys { display: flex; flex-wrap: wrap; gap: 4px; }
.ep-key { padding: 2px 6px; border: 1px solid var(--night-line); background: var(--honua-surface-2); font: 11px "Geist Mono", monospace; }
.ep-meta { display: block; margin-top: 6px; color: var(--night-muted); font-size: 11.5px; line-height: 1.45; }
.ep-url-cell { width: 34%; }
.ep-url { display: block; max-width: 100%; color: var(--night-ink); font: 11.5px/1.5 "Geist Mono", monospace; word-break: break-all; }
.ep-copy { margin-top: 7px; padding: 3px 9px; border: 1px solid var(--night-line); border-radius: 3px; background: transparent; color: var(--cyan); font: 700 10px "Geist Mono", monospace; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.ep-copy:hover, .ep-copy:focus-visible { border-color: var(--cyan); }
.ep-status-cell { width: 17%; }
.ep-detail { display: block; margin-top: 6px; color: var(--night-muted); font: 11px/1.45 "Geist Mono", monospace; word-break: break-word; }

.ep-pill { display: inline-block; padding: 3px 8px; border: 1px solid currentColor; font: 700 10px "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; background: var(--honua-surface-2); }
.ep-pill[data-status="pending"] { color: var(--night-muted); }
.ep-pill[data-status="ok"] { color: var(--honua-teal-bright); }
.ep-pill[data-status="warn"] { color: var(--honua-amber-bright); }
.ep-pill[data-status="bad"] { color: var(--honua-danger); }
.ep-pill[data-status="off"] { color: var(--honua-blue-bright); }
.ep-pill[data-status="np"] { color: var(--night-muted); border-style: dashed; }

.ep-gaps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ep-gaps li { padding: 16px 18px; border: 1px solid var(--night-line); background: var(--night-panel); font-size: 13px; line-height: 1.55; }
.ep-gaps strong { font-size: 15px; }
.ep-gaps p { margin: 6px 0 0; color: var(--night-muted); }
.ep-gaps code, .ep-observed code { font: 11.5px "Geist Mono", monospace; word-break: break-all; }
.ep-observed { margin-top: 18px; color: var(--night-muted); font-size: 12px; }
.ep-banner { max-width: 1320px; margin: 0 auto; padding: 14px 32px; color: var(--honua-amber-bright); font-size: 13px; }

@media (max-width: 650px) {
  .ep-family, .ep-banner { padding-left: 16px; padding-right: 16px; }
  /* Stack each row as a card so the status is visible without sideways scrolling. */
  .ep-scroll { overflow-x: visible; }
  .ep-table { min-width: 0; }
  .ep-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .ep-table tr, .ep-table tbody th, .ep-table td { display: block; width: auto; }
  .ep-table tr { border-bottom: 1px solid var(--night-line); }
  .ep-table tbody th, .ep-table td { border-bottom: 0; padding: 6px 14px; }
  .ep-table tbody th { padding-top: 14px; }
  .ep-table td:last-child { padding-bottom: 14px; }
  .ep-table td::before { content: attr(data-label); display: block; margin-bottom: 3px; color: var(--night-muted); font: 700 9.5px "Geist Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hub-hero.ep-hero { grid-template-columns: minmax(0, 1fr); }
.ep-hero h1 { font-size: clamp(40px, 6.4vw, 92px); line-height: .95; overflow-wrap: anywhere; }