/* Network Pulse: foundations, public views, administrator views, responsive rules. */
:root {
  color-scheme: dark;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #071a32;
  color: #edf8fb;
  --page: #071a32;
  --panel: #0b2643;
  --inset: #06172c;
  --border: #1b4963;
  --separator: #153a55;
  --muted: #a8c2cf;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { min-width: 0; margin: 0; background: var(--page); }
body { color: #edf8fb; line-height: 1.5; }
[hidden] { display: none !important; }
a { color: #6ae8e0; text-underline-offset: 3px; }
a:hover { color: #b5ffff; }
a, button, input, select, summary { transition: color .15s, border-color .15s, background-color .15s; }
:where(a, button, input, select, summary, [tabindex]):focus-visible { outline: 3px solid #f9d76e; outline-offset: 3px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
code { overflow-wrap: anywhere; }
form { margin: 0; }
h1 { margin: 0 0 8px; font-size: 24px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
h2 { margin: 0 0 16px; font-size: 20px; font-weight: 600; line-height: 1.35; color: #edf8fb; }
h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600; line-height: 1.4; }
p { margin: 0 0 16px; }
main { width: 100%; max-width: 1440px; min-width: 0; margin: 0 auto; padding: 24px clamp(16px, 3vw, 32px) 48px; }
.visually-hidden, .directory-caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 10; padding: 12px 16px; background: #f9d76e; color: var(--page); }
.skip-link:focus { top: 12px; }

/* Shared header: independent of compact page cards, including the logo's flex basis. */
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; width: 100%; max-width: 1440px; margin: 0 auto; padding: 6px clamp(16px, 3vw, 32px); border-bottom: 1px solid var(--border); }
.header-identity { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; min-width: 0; }
.brand { display: block; flex: 0 0 auto; width: 220px; line-height: 0; }
.brand-logo { display: block; width: 220px; height: 52px; max-width: 100%; object-fit: contain; }
.slogan { margin: 0; color: #8bdde1; font-size: .72rem; font-weight: 700; letter-spacing: .12em; white-space: nowrap; }
.site-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.site-navigation a, .site-navigation button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #b9d7df; font-size: 13px; text-decoration: none; white-space: nowrap; }
.site-navigation a:hover, .site-navigation button:hover { color: #edf8fb; border-color: #2c5b75; }
.site-navigation a[aria-current="page"] { color: #fff; background: #0d7582; border-color: #20aeb8; }

/* Panels, controls, feedback. */
.surface, .admin-panel, .status-panel, .error-container, .admin-auth-card { min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.surface { padding: 24px; }
.page-heading { margin-bottom: 32px; }
.page-heading p { max-width: 864px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.primary-button, .secondary-button, .copy-button, .danger-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; padding: 8px 16px; border: 1px solid #39708b; border-radius: 6px; font-size: 14px; font-weight: 600; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer; }
.primary-button { background: #0d7582; border-color: #20aeb8; color: #fff; }
.primary-button:hover { background: #0f8b9a; color: #fff; }
.secondary-button, .copy-button { background: var(--inset); color: #d8fbfa; }
.secondary-button:hover, .copy-button:hover { border-color: #20aeb8; color: #fff; }
.danger-button { background: var(--inset); border-color: #824646; color: #ffabab; }
.danger-button:hover { border-color: #ffabab; color: #ffd7db; }
.copy-button { font-size: 13px; font-weight: 500; }
.copy-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.copy-group-end { justify-content: flex-end; margin-top: 16px; }
.copy-status { color: #9ccbd3; font-size: 13px; overflow-wrap: anywhere; }
.copy-status:empty { display: none; }
.form-error { margin: 0 0 16px; padding: 12px; border: 1px solid #a94f5c; border-radius: 6px; background: #351c2a; color: #ffd7db; font-size: 14px; overflow-wrap: anywhere; }
.form-hint, .submission-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* Directory: independent heading, search, display options and protocol row. */
.explorer-page { padding-top: 16px; }
.directory-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 10px; }
.directory-heading h1 { margin: 0; }
.directory-stats { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 13px; }
.count-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; padding: 1px 6px; border: 1px solid #39708b; border-radius: 999px; background: var(--inset); color: #d8fbfa; font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.25; }
.explorer-tools { display: grid; grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); align-items: end; gap: 8px 16px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.hub-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; width: 100%; }
.hub-search label { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.hub-search input { width: 100%; min-width: 0; min-height: 36px; padding: 6px 12px; border: 1px solid #39708b; border-radius: 6px; background: var(--inset); color: #edf8fb; font-size: 14px; }
.hub-search button { min-height: 36px; padding: 6px 16px; border: 1px solid #20aeb8; border-radius: 6px; background: #0d7582; color: #fff; font-size: 14px; font-weight: 600; }
.directory-display-disclosure { min-width: 0; grid-column: 2; grid-row: 1; }
.directory-display-disclosure summary { min-height: 44px; padding: 10px 8px; color: #6ae8e0; font-size: 13px; cursor: pointer; }
.directory-display { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.directory-sorts, .directory-direction, .page-size, .protocol-filters, .pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; font-size: 12px; }
.directory-display nav > span:first-child, .protocol-filters > span { margin-right: 4px; color: var(--muted); }
.directory-display a, .page-size [aria-current], .protocol-filters a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 8px; border: 1px solid #2c5b75; border-radius: 4px; text-decoration: none; }
.directory-display a[aria-current], .page-size [aria-current], .protocol-filters a[aria-current] { border-color: #20aeb8; background: var(--inset); color: #edf8fb; text-decoration: underline; text-underline-offset: 4px; }
.protocol-filters { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid var(--separator); }
.protocol-filters .count-chip { border: 0; background: var(--inset); color: #9ccbd3; }
.explorer-layout { display: grid; grid-template-columns: minmax(176px, 208px) minmax(0, 1fr); align-items: start; gap: 12px; margin-top: 12px; }
.explorer-layout > *, .detail-layout > *, .submit-layout > *, .admin-layout > * { min-width: 0; }
.country-navigation { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.country-navigation h2 { margin-bottom: 8px; font-size: 14px; }
.country-navigation ul { list-style: none; margin: 0; padding: 0; }
.country-navigation a { display: flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px; font-size: 13px; text-decoration: none; }
.country-navigation a[aria-current] { border-left: 3px solid #20aeb8; padding-left: 5px; border-radius: 4px; background: var(--inset); color: #edf8fb; text-decoration: underline; text-underline-offset: 4px; }
.country-navigation small { margin-left: auto; color: #9ccbd3; }
.country-scroll { min-width: 0; max-width: 100%; }
.directory-results { min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.hub-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.hub-table th { height: 32px; padding: 4px 10px; background: var(--inset); color: var(--muted); font-size: 11px; font-weight: 600; border-bottom: 1px solid var(--border); }
.hub-table th:first-child { width: 46%; border-top-left-radius: 8px; }
.hub-table th:nth-child(2) { width: 16%; }
.hub-table th:nth-child(3) { width: 7%; }
.hub-table th:nth-child(4) { width: 11%; }
.hub-table th:last-child { width: 20%; border-top-right-radius: 8px; }
.hub-table td { min-width: 0; height: 36px; padding: 2px 10px; border-bottom: 1px solid var(--separator); font-size: 13px; line-height: 1.15; vertical-align: middle; overflow-wrap: anywhere; }
.hub-table tr:last-child td { border-bottom: 0; }
.hub-table tr:hover td { background: #0d2c4b; }
.hub-name, .hub-address { display: block; min-width: 0; overflow-wrap: anywhere; }
.hub-name { font-size: 13.5px; font-weight: 650; line-height: 1.15; text-decoration: none; }
.hub-name:hover { text-decoration: underline; }
.hub-address { margin-top: 2px; font: 11px/1.15 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: var(--muted); }
.hub-table th:nth-child(3), .hub-table td[data-label="Users"] { text-align: right; font-variant-numeric: tabular-nums; }
.hub-table time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.protocol-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px; border: 1px solid #2c5b75; border-radius: 4px; background: var(--inset); color: #c7dce3; font-size: 11px; white-space: nowrap; }
.empty-state td { height: 96px; padding: 24px; color: var(--muted); text-align: center; }
.pagination { justify-content: flex-end; gap: 16px; padding: 12px 0; color: var(--muted); }
.pagination a { display: inline-flex; align-items: center; min-height: 36px; }
.client-hublist { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--separator); border-radius: 6px; background: var(--inset); }
.client-hublist .client-hublist-heading { margin: 0 0 2px; color: #8bdde1; font-size: 13px; font-weight: 650; }
.client-hublist p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.client-hublist .copy-group { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; }
.client-hublist .copy-status { grid-column: 1 / -1; }
.client-hublist .copy-button { padding: 6px 8px; }
.client-hublist-link { min-width: 0; overflow-wrap: anywhere; user-select: text; }
.client-hublist-link code { font-size: 12px; }

/* Hub detail and operator submission. */
.back-link { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 16px; font-size: 14px; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.connection-column { display: grid; gap: 24px; }
.connection-panel h2, .facts-panel h2 { font-size: 13px; font-weight: 650; color: #8bdde1; text-transform: uppercase; letter-spacing: .08em; }
.connection-details { margin: 0; }
.connection-details dt { margin-bottom: 8px; color: var(--muted); font-size: 13px; }
.connection-details dd { margin: 0; }
.connection-address-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; min-width: 0; padding: 16px; border: 1px solid var(--separator); border-radius: 6px; background: var(--inset); }
.connection-link { min-width: 0; text-decoration: none; overflow-wrap: anywhere; user-select: text; }
.connection-link code { color: #edf8fb; font-size: 14px; }
.secure-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: #9ccbd3; font-size: 14px; }
.secure-note small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.hub-details { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; margin: 0; font-size: 13px; }
.hub-details dt { color: var(--muted); }
.hub-details dt, .hub-details dd { padding-bottom: 12px; border-bottom: 1px solid var(--separator); }
.hub-details dt:last-of-type, .hub-details dd:last-child { padding-bottom: 0; border-bottom: 0; }
.hub-details dd { min-width: 0; margin: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.hub-details dd > code { font-size: 11px; color: #9ccbd3; overflow-wrap: anywhere; }
.submit-layout { display: grid; grid-template-columns: minmax(288px, .85fr) minmax(0, 1.15fr); gap: 32px; align-items: start; }
.submission-panel h2, .registration-guide h2 { color: #8bdde1; font-size: 15px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.submit-form { display: grid; gap: 20px; }
.submit-form .primary-button { justify-self: start; }
.form-field { display: grid; gap: 8px; }
.form-field label { font-size: 15px; font-weight: 650; }
.form-field input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #39708b; border-radius: 6px; background: var(--inset); color: #edf8fb; font: 15px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.form-field input[aria-invalid="true"] { border-color: #ff8f8f; }
.submission-note { margin-top: 20px; }
.registration-guide { color: #c7dce3; font-size: 15px; line-height: 1.55; }
.registration-guide p:last-child { margin-bottom: 0; }
.code-label { color: #edf8fb; }
.code-block { max-width: 100%; margin: 8px 0 16px; padding: 16px; border: 1px solid var(--separator); border-radius: 6px; background: var(--inset); color: #d8fbfa; font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.registration-guide .copy-group { margin-bottom: 16px; }
.guide-steps { counter-reset: guide-step; margin: 24px 0; padding: 0; list-style: none; }
.guide-steps > li { position: relative; padding-left: 32px; margin-bottom: 24px; }
.guide-steps > li::before { counter-increment: guide-step; content: counter(guide-step); position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 23px; height: 23px; border: 1px solid #2c5b75; border-radius: 50%; background: var(--inset); color: #8bdde1; font-size: 12px; font-weight: 700; }
.guide-steps h3 { color: #edf8fb; font-size: 15px; font-weight: 650; }
.optional-details { margin-top: 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--inset); }
.optional-details summary { min-height: 44px; padding: 12px 16px; color: #6ae8e0; font-size: 14px; font-weight: 600; cursor: pointer; }
.details-body { padding: 16px; border-top: 1px solid var(--separator); font-size: 14px; }
.details-body .code-block { margin-bottom: 0; }

/* Compact status, error and authentication surfaces. */
.status-container, .error-container { width: 100%; max-width: 608px; margin: 0 auto; }
.status-container > h1 { margin-bottom: 24px; text-align: center; }
.status-panel { padding: 24px; }
.status-heading { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--separator); }
.status-heading h2 { margin: 0; font-size: 18px; }
.status-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--inset); color: #f9d76e; }
.status-accepted .status-icon { color: #75e6b4; }
.status-rejected .status-icon { color: #ff9b9b; }
.status-expired .status-icon { color: var(--muted); }
.status-message { margin: 16px 0; font-size: 15px; line-height: 1.55; }
.status-meta { margin-bottom: 20px; color: var(--muted); font-size: 13px; }
.status-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.error-page { padding-top: 48px; }
.error-container { padding: 32px; text-align: center; }
.error-status { margin-bottom: 8px; color: #8bdde1; font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.error-container h1 { margin-bottom: 16px; }
.error-message { margin-bottom: 24px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.admin-sign-in { display: flex; flex-direction: column; align-items: center; }
.admin-auth-card { width: 100%; max-width: 400px; margin-top: 24px; padding: 32px; }
.auth-heading { margin-bottom: 24px; text-align: center; }
.auth-heading .admin-meta { margin: 0; }
.admin-auth-card label { display: block; margin-bottom: 8px; font-size: 14px; }
.admin-auth-card input:not([type="hidden"]) { display: block; width: 100%; min-width: 0; min-height: 44px; border: 1px solid #39708b; border-radius: 6px; background: var(--inset); padding: 8px 12px; color: #edf8fb; font-size: 14px; }
.challenge-panel { min-width: 0; margin: 24px 0 16px; padding: 0; border: 0; }
.challenge-panel legend { padding: 0 0 12px; color: var(--muted); font-size: 13px; }
.cf-turnstile { min-width: 0; width: 150px; max-width: 100%; margin-inline: auto; }
.admin-auth-card [role="status"], .admin-auth-card noscript { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
#admin-login-submit { width: 100%; min-height: 44px; padding: 8px 16px; border: 1px solid #20aeb8; border-radius: 6px; background: #0d7582; color: #fff; font-size: 14px; }
#admin-login-submit:disabled { opacity: .65; cursor: not-allowed; }
.admin-sign-in > p { margin-top: 24px; font-size: 14px; }
.admin-sign-in > p a { display: inline-flex; align-items: center; min-height: 44px; }

/* Administrator shell and operational records. Section headings stay white and sentence case. */
.admin-page-heading { margin-bottom: 24px; }
.admin-meta { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.admin-page-heading .admin-meta { margin: 0; }
.admin-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.admin-nav { min-width: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.admin-nav a { display: flex; align-items: center; min-height: 44px; padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 14px; text-decoration: none; }
.admin-nav a:last-child { border-bottom: 0; }
.admin-nav a[aria-current] { color: #6ae8e0; background: var(--inset); box-shadow: inset 3px 0 #20aeb8; text-decoration: underline; text-underline-offset: 4px; }
.admin-nav a:hover { background: #0d2c4b; color: #edf8fb; }
.admin-content { min-width: 0; }
.admin-panel { margin-bottom: 24px; }
.admin-summary, .admin-confirm { padding: 16px; }
.admin-summary p, .admin-confirm p { font-size: 13px; }
.admin-summary > p { color: var(--muted); }
.admin-summary dl { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr); gap: 8px 16px; margin: 16px 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.admin-summary dt { color: var(--muted); }
.admin-summary dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.admin-summary h3 { font-size: 14px; margin: 24px 0 8px; }
.job-summary { padding-bottom: 8px; border-bottom: 1px solid var(--separator); }
.admin-page code { display: block; color: #9ccbd3; font-size: 12px; white-space: normal; overflow-wrap: anywhere; user-select: text; }
.admin-page small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 0 0 16px; }
.admin-toolbar label { flex: 1 1 150px; min-width: 0; color: var(--muted); font-size: 13px; }
.admin-toolbar label:first-child { flex-grow: 2; }
.admin-toolbar input, .admin-toolbar select { display: block; width: 100%; min-width: 0; min-height: 44px; margin-top: 6px; border: 1px solid #39708b; border-radius: 6px; background: var(--inset); padding: 8px 12px; color: #edf8fb; font: inherit; }
.table-heading { margin: 0; padding: 16px; }
.admin-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.admin-table th { background: var(--inset); padding: 10px 12px; color: var(--muted); font-size: 12px; font-weight: 600; }
.admin-table td { padding: 8px 12px; border-top: 1px solid var(--separator); vertical-align: middle; font-size: 13px; overflow-wrap: anywhere; }
.admin-table strong { display: block; font-size: 13px; }
.admin-table code { margin: 2px 0 4px; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-actions button { min-height: 36px; padding: 4px 10px; font-size: 12px; font-weight: 500; }
.admin-notice { padding: 12px 16px; border: 1px solid #39708b; border-radius: 6px; background: var(--inset); overflow-wrap: anywhere; font-size: 14px; }
.admin-empty { margin: 0; padding: 24px 16px; border-top: 1px solid var(--separator); color: var(--muted); font-size: 14px; }
.admin-pagination { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 24px; }
.admin-pagination a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid #39708b; border-radius: 6px; background: var(--inset); color: #edf8fb; font-size: 13px; text-decoration: none; }
.admin-sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px 12px; min-width: 0; margin: 0 0 16px; padding: 16px; border: 1px solid #39708b; border-radius: 6px; }
.admin-sources legend { padding: 0 8px; color: var(--muted); font-size: 13px; }
.admin-sources label { display: flex; align-items: center; min-height: 44px; gap: 8px; font-size: 13px; }
.admin-sources input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: #20aeb8; }
.admin-evidence { border-top: 1px solid #39708b; padding: 12px 0; font-size: 13px; overflow-wrap: anywhere; }
.admin-evidence p { margin: 8px 0; color: var(--muted); }
.admin-evidence ul { padding-left: 20px; color: var(--muted); }
.admin-confirm { max-width: 600px; }
.admin-confirm > code { margin-bottom: 16px; padding: 8px 12px; border: 1px solid var(--separator); border-radius: 4px; background: var(--inset); }
.confirmation-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.cancel-action { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 13px; }

/* Content collapses without narrowing the identity or hiding real values. */
@media (min-width: 701px) {
  .directory-display-disclosure[open] > summary { display: none; }
  .hub-search label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .client-hublist { margin-bottom: 8px; }
  .protocol-filters { padding-top: 4px; }
}
@media (max-width: 1200px) {
  .explorer-tools { grid-template-columns: minmax(0, 1fr); }
  .directory-display-disclosure { grid-column: 1; grid-row: 3; }
  .hub-search { max-width: 640px; }
}
@media (max-width: 1024px) {
  .admin-layout, .detail-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .admin-nav { display: flex; max-width: 100%; overflow-x: auto; }
  .admin-nav a { flex: 0 0 auto; border-bottom: 0; border-right: 1px solid var(--border); }
  .admin-nav a[aria-current] { box-shadow: inset 0 -3px #20aeb8; }
}
@media (max-width: 900px) {
  .site-header { flex-direction: column; align-items: flex-start; gap: 4px; }
  .site-navigation { width: 100%; }
  .submit-layout, .client-hublist { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .site-header { padding: 8px 16px; }
  .header-identity { width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; }
  .brand { flex: 0 0 auto; }
  .slogan { font-size: 10px; white-space: normal; }
  .site-navigation { gap: 4px; }
  .site-navigation a, .site-navigation button { padding: 0 6px; font-size: 12px; }
  main { padding: 20px 16px 32px; }
  .explorer-page { padding-top: 12px; }
  .directory-heading { gap: 4px 8px; }
  .directory-heading h1 { font-size: 20px; }
  .directory-stats { font-size: 11px; }
  h1 { font-size: 22px; }
  .surface { padding: 16px; }
  .page-heading { margin-bottom: 24px; }
  .hub-search { width: 100%; }
  .hub-search input, .hub-search button, .directory-display a, .page-size [aria-current], .protocol-filters a { min-height: 44px; }
  .directory-display { align-items: flex-start; flex-direction: column; gap: 12px; }
  .directory-display-disclosure { grid-row: 3; }
  .directory-display-disclosure[open] .directory-display { padding: 8px 0; }
  .protocol-filters { grid-row: 2; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .protocol-filters > * { flex: 0 0 auto; }
  .client-hublist { padding: 8px; }
  .client-hublist p, .client-hublist-link code { font-size: 11px; }
  .directory-display nav { width: 100%; }
  .directory-display nav > span:first-child { flex-basis: 100%; margin-bottom: 4px; }
  .explorer-layout { grid-template-columns: minmax(0, 1fr); }
  .country-scroll { overflow-x: auto; padding: 4px; }
  .country-navigation { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; }
  .country-navigation h2 { margin-bottom: 0; }
  .country-navigation .country-scroll { grid-column: 2; grid-row: 1; }
  .country-navigation > .clear-filter { grid-column: 1 / -1; }
  .country-navigation ul { display: flex; flex-wrap: nowrap; gap: 6px; width: max-content; }
  .country-navigation li { flex: 0 0 auto; }
  .country-navigation a { min-height: 44px; padding: 4px 8px; border: 1px solid #2c5b75; border-radius: 999px; }
  .country-navigation a[aria-current] { padding-left: 8px; border: 1px solid #20aeb8; }
  .hub-table, .hub-table tbody { display: block; width: 100%; }
  .hub-table thead, .admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hub-table tr:not(.empty-state) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; min-height: 44px; position: relative; padding: 12px; border-bottom: 1px solid var(--separator); }
  .hub-table tr:last-child { border-bottom: 0; }
  .hub-table td { display: block; width: auto; height: auto; min-width: 0; padding: 2px 0; border: 0; font-size: 12px; }
  .hub-table td[data-label="Hub"], .hub-table td[data-label="Last verified"] { grid-column: 1 / -1; }
  .hub-table td[data-label="Users"]::before { content: "Users: "; color: var(--muted); }
  .hub-name { font-size: 14px; }
  .hub-address { font-size: 12px; line-height: 1.35; }
  .stretched-card-link::after { content: ""; position: absolute; inset: 0; }
  .empty-state, .empty-state td { display: block; width: 100%; }
  .empty-state td { padding: 24px 12px; }
  .connection-address-row { grid-template-columns: minmax(0, 1fr); }
  .connection-address-row .primary-button { width: 100%; }
  .hub-detail-link { display: inline-flex; min-height: 44px; min-width: 0; max-width: 100%; align-items: center; overflow-wrap: anywhere; }
  .code-block { padding: 12px; font-size: 11.5px; }
  .guide-steps > li { padding-left: 28px; }
  .optional-details summary, .details-body { padding: 12px; }
  .status-panel, .error-container { padding: 20px; }
  .status-actions { flex-direction: column; }
  .status-actions > * { width: 100%; }
  .error-page { padding-top: 32px; }
  .admin-auth-card { padding: 24px 16px; margin-top: 16px; }
  .admin-summary dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .admin-summary dd { margin-bottom: 8px; }
  .admin-table, .admin-table tbody { display: block; }
  .admin-table tr { display: block; padding: 12px; border-top: 1px solid var(--border); }
  .admin-table td { display: block; padding: 6px 0; border: 0; }
  .admin-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; }
  .admin-actions button { min-height: 44px; }
  .admin-sources { grid-template-columns: minmax(0, 1fr); padding: 12px; }
}
@media (max-width: 350px) {
  .brand, .brand-logo { width: 180px; height: auto; }
  .site-navigation a, .site-navigation button { padding: 0 4px; }
  .hub-details { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .hub-details dt { border-bottom: 0; padding-bottom: 0; }
  .hub-details dd { margin-bottom: 8px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}