/* Shared Atmosphere presentation. The directory and relay data keep their existing APIs. */
:root { --sheet:#0a0b11; --well:#07080d; --mut:#a29baa; --faint:#8b8694; --c2:var(--c-2); }
html { scroll-padding-top:24px; }
body { padding:clamp(20px,5vh,56px) clamp(12px,4vw,32px); font-size:13px; }
body::before { background:radial-gradient(ellipse at 50% 0%,rgba(52,211,153,.055),transparent 58%); }
.sheet { max-width:1120px; padding:32px; border-radius:16px; }
.site-nav { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:24px; border-bottom:1px solid var(--line); }
.nav-brand { display:inline-flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font:600 26px/1.3 var(--display); letter-spacing:-.025em; white-space:nowrap; }
.nav-brand b { color:var(--c); font-weight:600; }
.ptitle { margin:26px 0 7px; font:500 21px/1.4 var(--display); letter-spacing:-.02em; }
.tag { margin:0; color:var(--ink-2); font-size:13px; }
.tag-2 { max-width:720px; margin:8px 0 0; color:var(--mut); font-size:12px; }
.tag a { text-underline-offset:3px; text-decoration-color:rgba(52,211,153,.35); }
.counts { margin-top:24px; gap:32px; }
.count b { font-size:28px; font-weight:500; }
.count span { font-size:9px; letter-spacing:.1em; }
.hr { margin-top:24px; }
.grp { margin-top:24px; }
.glabel { font-size:10px; font-weight:500; letter-spacing:.17em; margin-bottom:9px; }
.gnote { color:var(--mut); font-size:12px; }
.directory-tools { position:sticky; top:0; z-index:5; background:var(--sheet); padding:14px 0; border-bottom:1px solid var(--line); }
.search-field label { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
.search-wrap { position:relative; }
.search-wrap>.icon { position:absolute; top:50%; left:13px; transform:translateY(-50%); color:var(--faint); }
.search-wrap .tool-input { width:100%; border:1px solid var(--line); border-radius:6px; background:var(--well); padding:12px 14px 12px 39px; font-size:12px; }
.search-wrap .tool-input:focus { border-color:var(--c); box-shadow:0 0 0 2px rgba(52,211,153,.06); }
.chips { gap:6px; margin-top:12px; }
.chip { font-size:10px; letter-spacing:0; border-radius:5px; padding:8px 10px; }
.chip.on { color:var(--c); background:rgba(52,211,153,.09); border-color:rgba(52,211,153,.35); }
.legend { font-size:9px; gap:16px; margin-top:15px; }
.table-hint { display:none; }
.tw { margin-top:14px; }
table.dir { min-width:760px; }
table.dir th { font-size:9px; padding:13px 12px 12px 0; }
table.dir td { padding:14px 12px 14px 0; font-size:11px; }
table.dir th:last-child,table.dir td:last-child { padding-right:0; }
table.dir th:first-child { width:36%; }
.host-link { display:block; max-width:100%; border:0; background:none; color:var(--ink); font:inherit; text-align:left; padding:0; cursor:pointer; overflow-wrap:anywhere; text-decoration:underline; text-decoration-color:rgba(52,211,153,.3); text-underline-offset:4px; }
.host-link:hover { text-decoration-color:var(--c); color:#fff; }
.sort-button { display:inline-flex; align-items:center; gap:5px; border:0; background:none; color:inherit; padding:0; font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; }
.sort-indicator { display:inline-block; flex:none; width:12px; height:12px; background:currentColor; visibility:hidden; -webkit-mask:url('/assets/icons/arrow-forward-outline.svg') center/contain no-repeat; mask:url('/assets/icons/arrow-forward-outline.svg') center/contain no-repeat; }
th[aria-sort="ascending"] .sort-indicator { visibility:visible; transform:rotate(-90deg); }
th[aria-sort="descending"] .sort-indicator { visibility:visible; transform:rotate(90deg); }
.dots { gap:5px; }
.dots i { width:8px; height:8px; flex:none; }
.relay-tooltip { position:relative; font-style:normal; }
.relay-tooltip:hover::after {
  content:attr(data-relay); position:absolute; bottom:calc(100% + 5px); right:0;
  width:max-content; max-width:320px; padding:6px 10px; border:1px solid var(--line);
  border-radius:4px; background:#191b24; color:var(--ink); font:11px/1.5 var(--mono);
  white-space:normal; z-index:10; box-shadow:0 2px 8px rgba(0,0,0,.5); pointer-events:none;
}

.account-link { color:inherit; text-decoration:underline; text-decoration-color:rgba(52,211,153,.3); text-underline-offset:4px; }
.account-link:hover { color:var(--c); }
#load-more { height:1px; }
.pager { margin-top:18px; }
.pager button { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:5px; padding:8px 11px; text-decoration:none; }
.pager button:disabled { opacity:.35; cursor:default; }
.icon { display:inline-block; flex:none; width:16px; height:16px; vertical-align:middle; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,.tw:focus-visible { outline:2px solid var(--c); outline-offset:4px; }
footer { margin-top:32px; padding-top:20px; gap:18px; font-size:12px; }
footer .vm { gap:5px; }
footer .vm vayu-logo { display:none; }
footer a { text-decoration:none; border-bottom:1px solid rgba(255,255,255,.14); padding-bottom:1px; }
footer a:hover { border-color:var(--c); }
.modal-overlay { background:rgba(0,0,0,.75); backdrop-filter:none; -webkit-backdrop-filter:none; overscroll-behavior:contain; padding:5vh 16px; }
.modal { max-width:740px; }
.modal-header { padding:20px 24px; }
.modal-title { font-size:15px; line-height:1.5; text-transform:none; letter-spacing:0; color:var(--ink); overflow-wrap:anywhere; }
.modal-close { width:32px; height:32px; display:grid; place-items:center; flex:none; border:1px solid var(--line); border-radius:5px; }
.modal-body { padding:16px 24px 24px; }
.kv { gap:20px; padding:10px 0; }
.kv .k { font-size:9px; }
.kv .v { min-width:0; font-size:11px; overflow-wrap:anywhere; word-break:normal; }
.relay-line { padding:10px 0; font-size:11px; }
.relay-line .st { font-size:9px; }
[hidden] { display:none !important; }
@media(max-width:700px) {
  .sheet { padding:24px 20px; }
  .site-nav { gap:16px; flex-wrap:wrap; padding-bottom:18px; }
  .nav-brand { font-size:24px; }
  .ptitle { font-size:19px; margin-top:22px; }
  .directory-tools { padding-top:12px; }
  .chip { padding:8px; font-size:9px; }
  .legend { gap:10px; }
  .table-hint { display:block; margin:12px 0 0; font:9px/1.6 var(--mono); color:var(--mut); }
  table.dir { min-width:690px; }
  .pager { gap:8px; font-size:9px; }
  .pager button { padding:8px; font-size:10px; }
  footer { flex-wrap:wrap; gap:14px; font-size:11px; }
  footer .grow { display:none; }
  footer>span:first-child { flex-basis:100%; }
  .modal-header { padding:16px; }
  .modal-body { padding:12px 16px 20px; }
  .modal-body .kv { display:block; }
  .kv .k { display:block; margin-bottom:3px; }
  .kv .v { display:block; }
  .relay-line { gap:9px; flex-wrap:wrap; }
  .relay-line .name { flex-basis:55%; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
/* Full server and relay information retained from the original directory. */
.detail-health { margin:0 0 18px; font:10px/1.7 var(--mono); color:var(--mut); }
.detail-health.online { color:var(--green); }
.detail-health.offline,.crawl-error { color:var(--red); }
.relay-summary { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:14px; font:10px/1.6 var(--mono); }
.relay-host { display:block; color:var(--faint); font:9px/1.6 var(--mono); margin-top:3px; }
.relay-accounts { font:9px/1.6 var(--mono); color:var(--mut); }
.relay-line { flex-wrap:wrap; }
.crawl-error { flex-basis:100%; margin:3px 0; font:10px/1.7 var(--mono); overflow-wrap:anywhere; }
@media(max-width:700px) { .relay-accounts { margin-left:auto; } }
.st.active { color:var(--green); } .st.idle { color:var(--amber); }
.st.offline { color:var(--red); } .st.banned { color:#f472b6; } .st.none { color:var(--faint); }

/* Explorer links stay secondary to the local directory navigation. */
.host-cell { display:flex; align-items:baseline; gap:12px; }
.host-cell .host-link { min-width:0; flex:1; }
.taproot-link, .directory-link { flex:none; font:9px/1.6 var(--mono); color:var(--mut); text-decoration:underline; text-decoration-color:rgba(52,211,153,.25); text-underline-offset:3px; white-space:nowrap; }
.taproot-link:hover, .directory-link:hover { color:var(--c); text-decoration-color:var(--c); }
.account-cell { display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.account-summary { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.detail-actions { display:flex; flex-wrap:wrap; gap:8px 18px; margin:-7px 0 18px; }
.detail-actions .taproot-link, .detail-actions .directory-link { font-size:11px; color:var(--c); }
.relay-links { display:flex; flex-wrap:wrap; gap:3px 14px; margin-top:3px; word-break:normal; }

i.exhausted { background:var(--amber); }
i.blocked { background:#f472b6; }
.st.exhausted { color:var(--amber); }
.st.blocked { color:#f472b6; }