/* Hallmark · shape: app screen · genre: modern-minimal · theme: brand · redesign: full
 * paper: white · accent: blue · display: Segoe UI · body: Segoe UI
 * nav: existing top shell · signature: verified server directory · states: full, empty, error, loading, success
 * axes: white/system/blue · posture: compact directory · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: density, use a readable table and mobile labelled rows */
/* Hallmark · reworded marketing headings and decorative labels into directory labels · app scope */
/* Hallmark · existing system edited by user request: archive-inspired dense table; verification recorded in docs/STATUS.md */
@import url("./tokens.css");
@import url("./base.css");

.skip { position:absolute; top:calc(-1 * var(--space-2xl)); left:var(--space-md); z-index:var(--z-toast); padding:var(--space-xs) var(--space-md); background:var(--color-accent); color:var(--color-accent-ink); }
.skip:focus-visible { top:var(--space-xs); }
.header { border-bottom:1px solid var(--color-rule); background:var(--color-paper); }
.nav { display:flex; align-items:center; min-height:76px; gap:var(--space-xl); }
.brand { display:inline-flex; align-items:center; gap:var(--space-sm); flex-shrink:0; font-size:var(--text-2xl); font-weight:var(--display-weight); letter-spacing:var(--tracking-display); text-decoration:none; white-space:nowrap; }
.brand svg { width:32px; height:32px; fill:var(--color-accent); stroke:var(--color-accent); stroke-width:1.5; }
.brand svg circle { fill:var(--color-paper); stroke:var(--color-paper); }
.primary-nav { display:flex; align-items:center; gap:var(--space-lg); margin-right:auto; min-width:0; }
.primary-nav>a,.language-link { display:inline-flex; align-items:center; min-height:44px; gap:var(--space-xs); text-decoration:none; font-size:var(--text-sm); color:var(--color-muted); white-space:nowrap; }
.primary-nav>a:hover,.primary-nav>a[aria-current],.language-link:hover { color:var(--color-ink); }
.primary-nav>a[aria-current] { box-shadow:inset 0 -2px 0 var(--color-accent); }
.nav-actions { display:flex; align-items:center; gap:var(--space-md); }
.language-menu { position:relative; flex-shrink:0; }
.language-menu>summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px; min-height:44px; padding:0 8px; font-size:var(--text-sm); font-weight:600; }
.language-menu>summary::-webkit-details-marker { display:none; }
.language-menu>nav { position:absolute; right:0; top:100%; z-index:100; min-width:195px; padding:8px; background:var(--color-paper); border:1px solid var(--color-rule); border-radius:var(--radius-input); box-shadow:0 8px 24px #15243a20; }
.language-menu .language-link { display:flex; padding:0 12px; border-radius:var(--radius-input); }
.language-menu .language-link:hover,.language-menu .language-link[aria-current] { background:var(--color-paper-3); color:var(--color-accent); }
.fav-count,.count { font-size:var(--text-sm); font-variant-numeric:tabular-nums; }
.fav-count { color:var(--color-muted); min-width:1.25rem; text-align:center; }
.action-icon { display:inline-block; width:18px; height:18px; flex-shrink:0; vertical-align:middle; }
.button .action-icon { margin:0; }
.button.ghost.icon-action { width:42px; min-width:42px; padding:9px; color:var(--color-muted); }
.button.icon-action .action-icon { width:21px; height:21px; margin:0; }
.button.ghost.icon-action:hover { color:var(--color-accent); border-color:var(--color-accent); }
.button.favorite[aria-pressed="true"] { color:var(--color-accent); background:var(--color-paper-3); border-color:var(--color-accent); }
.favorite[aria-pressed="true"] .action-icon { fill:currentColor; }
.workspace-signout .action-icon { width:15px; height:15px; margin-right:6px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-xs); min-height:44px; padding:var(--space-xs) var(--space-md); border:1px solid var(--color-accent); border-radius:var(--radius-input); background:var(--color-accent); color:var(--color-accent-ink); font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:1.4; text-align:center; text-decoration:none; white-space:nowrap; transition:transform var(--dur-micro) var(--ease-out); }
.button:hover { background:var(--color-accent-hover); border-color:var(--color-accent-hover); }
.button:active { transform:translateY(1px); }
.button:focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; }
.button.ghost { background:var(--color-clear); color:var(--color-ink); border-color:var(--color-control-edge); }
.button.ghost:hover { background:var(--color-paper-3); border-color:var(--color-muted); }
.button.danger { background:var(--color-clear); color:var(--color-error); border-color:var(--color-error); }
.button.danger:hover { background:var(--color-paper-3); }
.button.small { padding-inline:var(--space-sm); }
.button:disabled,.button[aria-disabled="true"] { opacity:.65; cursor:not-allowed; background:var(--color-paper-3); color:var(--color-muted); border-color:var(--color-rule); transform:none; }
.button[aria-busy="true"],form[aria-busy="true"] button { cursor:progress; opacity:.7; }
.button[aria-pressed="true"] { color:var(--color-accent); border-color:var(--color-accent); }
.button[aria-invalid="true"] { border-color:var(--color-error); }
.icon-button { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:var(--space-xs); background:var(--color-clear); border:1px solid var(--color-clear); border-radius:var(--radius-input); color:var(--color-muted); }
.icon-button:hover { background:var(--color-paper-3); color:var(--color-ink); }
.icon-button:active { transform:translateY(1px); }
.icon-button svg { width:17px; height:17px; fill:none; stroke:var(--color-ink-2); stroke-width:1.6; }
.text-link { color:var(--color-ink-2); font-size:var(--text-sm); text-underline-offset:.25em; }
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-lg); padding-block:var(--space-xl) var(--space-lg); }
.page-heading>div { min-width:0; }
.page-heading>h1+.lede { align-self:flex-end; }
.page-heading>.text-link { padding-top:var(--space-xs); }
.page-heading .lede { margin-top:var(--space-xs); }
.directory-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--space-xs) var(--space-lg); flex-shrink:0; }
.directory-links a { display:inline-flex; align-items:center; min-height:44px; }
.lede { max-width:70ch; color:var(--color-muted); font-size:var(--text-md); }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0 0 var(--space-lg); padding:var(--space-md) 0; border-block:1px solid var(--color-rule); gap:var(--space-lg); }
.stats>div { min-width:0; display:flex; flex-direction:column; gap:var(--space-2xs); padding-left:var(--space-lg); border-left:1px solid var(--color-rule); }
.stats>div:first-child { padding-left:0; border-left:0; }
.stats dt { color:var(--color-muted); font-size:var(--text-sm); font-variant-numeric:tabular-nums; }
.stats dd { margin:0; font-size:var(--text-2xl); line-height:1.3; font-weight:var(--weight-medium); font-variant-numeric:tabular-nums; }
.stats dd span,.stats dd em { font-size:var(--text-sm); font-style:normal; color:var(--color-muted); font-variant-numeric:tabular-nums; }
.directory { display:grid; grid-template-columns:244px minmax(0,1fr); gap:var(--gap-columns); align-items:start; }
.filters { background:var(--color-paper-2); padding:var(--space-md); border-radius:var(--radius-card); min-width:0; }
.filter-disclosure>summary { font-size:var(--text-md); font-weight:var(--weight-medium); cursor:pointer; min-height:44px; display:flex; align-items:center; justify-content:space-between; }
.filter-disclosure>summary::after { content:"−"; font-size:var(--text-lg); color:var(--color-muted); }
.filter-disclosure:not([open])>summary::after { content:"+"; }
.filter-disclosure>summary::-webkit-details-marker { display:none; }
.filter-form,.form-stack { display:flex; flex-direction:column; gap:var(--space-md); }
.search-controls { display:flex; flex-direction:column; gap:var(--space-xs); }
.filter-form>.button { white-space:normal; overflow-wrap:anywhere; }
.field { display:flex; flex-direction:column; gap:var(--space-xs); min-width:0; }
label,legend { font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--color-ink-2); }
input,select,textarea { width:100%; min-height:44px; padding:var(--space-xs) var(--space-sm); background:var(--color-paper); color:var(--color-ink); border:1px solid var(--color-control-edge); border-radius:var(--radius-input); font-size:var(--text-sm); line-height:1.5; }
input::placeholder,textarea::placeholder { color:var(--color-muted); opacity:1; }
input:hover,select:hover,textarea:hover { border-color:var(--color-muted); }
input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid var(--color-focus); outline-offset:2px; border-color:var(--color-focus); }
input:disabled,select:disabled,textarea:disabled { opacity:.6; cursor:not-allowed; }
input[aria-invalid="true"],textarea[aria-invalid="true"] { border-color:var(--color-error); }
input[type="checkbox"],input[type="radio"] { width:20px; height:20px; min-height:0; margin:0; accent-color:var(--color-accent); flex-shrink:0; }
textarea { min-height:160px; resize:vertical; }
.filter-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm); }
.clear { display:flex; align-items:center; justify-content:center; min-height:44px; color:var(--color-muted); font-size:var(--text-sm); }
.sidebar-help { padding-top:var(--space-md); margin-top:var(--space-md); border-top:1px solid var(--color-rule); font-size:var(--text-sm); color:var(--color-muted); }
.results { min-width:0; }
.results-head { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); margin-bottom:var(--space-sm); }
.results-head h2 { display:flex; align-items:baseline; gap:var(--space-sm); }
.results-head>a { font-size:var(--text-sm); color:var(--color-ink-2); }
.server-table { min-width:0; }
table { width:100%; border-collapse:collapse; font-size:var(--text-sm); font-variant-numeric:tabular-nums; }
th { text-align:left; font-weight:var(--weight-medium); color:var(--color-muted); background:var(--color-paper-2); }
th,td { padding:var(--space-sm); border-bottom:1px solid var(--color-rule); vertical-align:middle; }
th:first-child,td:first-child { padding-left:var(--space-md); }
th:last-child,td:last-child { padding-right:var(--space-md); }
tbody tr:hover { background:var(--color-paper-2); }
.server-main { width:42%; max-width:1px; }
.server-name { display:block; font-size:var(--text-md); font-weight:var(--weight-medium); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; }
.server-name:hover { text-decoration:underline; }
.server-address { display:flex; align-items:center; flex-wrap:wrap; column-gap:var(--space-xs); color:var(--color-muted); font-variant-numeric:tabular-nums; }
.server-address code { font-size:var(--text-sm); }
.server-address .icon-button { margin-block:calc(-1 * var(--space-2xs)); }
.server-taxonomy { display:flex; flex-wrap:wrap; column-gap:var(--space-sm); row-gap:var(--space-2xs); font-size:var(--text-sm); color:var(--color-muted); }
.server-taxonomy a { text-decoration-color:var(--color-rule); }
.map-cell { min-width:104px; max-width:140px; overflow-wrap:anywhere; }
.map-cell a { text-decoration-color:var(--color-rule); }
.players-cell { min-width:94px; font-variant-numeric:tabular-nums; }
.players-cell strong { display:block; font-weight:var(--weight-medium); white-space:nowrap; }
.players-cell strong span { color:var(--color-muted); font-weight:var(--weight-regular); }
.players-cell small { display:block; font-size:var(--text-sm); color:var(--color-muted); }
meter { display:block; width:76px; height:5px; border:0; border-radius:0; margin-top:var(--space-xs); background:var(--color-paper-3); accent-color:var(--color-accent); }
meter::-webkit-meter-bar { border:0; border-radius:0; background:var(--color-paper-3); }
meter::-webkit-meter-optimum-value { border-radius:0; background:var(--color-accent); }
meter::-moz-meter-bar { background:var(--color-accent); }
.status { display:inline-block; font-size:var(--text-sm); font-weight:var(--weight-medium); white-space:nowrap; font-variant-numeric:tabular-nums; }
.status.online { color:var(--color-success); }
.status.offline { color:var(--color-error); }
.status.stale,.status.checking { color:var(--color-warning); }
.status-cell { min-width:138px; }
.status-cell small { display:block; max-width:155px; margin-top:var(--space-2xs); font-size:var(--text-sm); line-height:1.4; color:var(--color-muted); font-variant-numeric:tabular-nums; }
.save-cell { width:70px; }
.tag { display:inline-block; color:var(--color-muted); font-size:var(--text-sm); }
.pagination { display:flex; justify-content:space-between; align-items:center; gap:var(--space-md); margin-block:var(--space-lg); color:var(--color-muted); font-size:var(--text-sm); font-variant-numeric:tabular-nums; }
.pagination>div { display:flex; gap:var(--space-xs); }
.data-note { color:var(--color-muted); font-size:var(--text-sm); line-height:1.65; max-width:90ch; }
.data-note a { color:var(--color-ink-2); }
.directory-guide { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-lg) var(--gap-columns); margin-top:var(--space-xl); padding-top:var(--space-lg); border-top:1px solid var(--color-rule); }
.directory-guide h2 { margin-bottom:var(--space-sm); }
.directory-guide p { max-width:70ch; color:var(--color-muted); }
.empty { padding:var(--space-xl) var(--space-lg); background:var(--color-paper-2); }
.empty h2,.empty h3 { margin-bottom:var(--space-sm); }
.empty p { max-width:60ch; color:var(--color-muted); margin-bottom:var(--space-lg); }
.empty.compact { padding:var(--space-lg) 0; background:var(--color-clear); }
.browse-index { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap-columns); margin-bottom:var(--space-xl); }
.browse-group { min-width:0; }
.browse-group h2 { padding-bottom:var(--space-md); border-bottom:1px solid var(--color-rule); }
.taxon-list { margin:0; padding:0; list-style:none; }
.taxon-list li { padding-block:var(--space-xs); border-bottom:1px solid var(--color-rule); }
.taxon-list a { display:flex; align-items:center; justify-content:space-between; min-height:44px; gap:var(--space-md); text-decoration:none; }
.taxon-list a:hover span:first-child { text-decoration:underline; }
.taxon-list p { font-size:var(--text-sm); color:var(--color-muted); padding-bottom:var(--space-xs); }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:var(--space-sm); align-items:center; padding-top:var(--space-lg); font-size:var(--text-sm); color:var(--color-muted); }
.detail-hero { padding-block:var(--space-lg); }
.detail-heading { flex-direction:column; gap:var(--space-md); }
.detail-heading .actions { margin:0; }
.server-meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-md); margin-top:var(--space-sm); color:var(--color-muted); font-size:var(--text-sm); }
.check-times { display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-lg); margin-bottom:var(--space-lg); color:var(--color-muted); font-size:var(--text-sm); }
.detail-main { min-width:0; }
.detail-hero .status { margin-bottom:var(--space-sm); }
.detail-hero h1 { max-width:45ch; overflow-wrap:anywhere; }
.detail-hero .lede { margin-top:var(--space-sm); }
.actions { display:flex; gap:var(--space-sm); flex-wrap:wrap; align-items:center; margin-block:var(--space-lg) var(--space-md); }
.detail-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--gap-columns); align-items:start; }
.panel { padding:var(--space-lg); background:var(--color-paper-2); color:var(--color-ink); border-radius:var(--radius-card); min-width:0; }
.panel h2 { margin-bottom:var(--space-md); }
.details dl { margin:0; }
.details dl>div { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-md); padding-block:var(--space-sm); border-bottom:1px solid var(--color-rule); font-size:var(--text-sm); }
.details dl>div:last-child { border-bottom:0; }
.details dt { color:var(--color-muted); }
.details dd { text-align:right; margin:0; overflow-wrap:anywhere; }
.history-table { max-height:390px; overflow:auto; margin-block:var(--space-md); }
.history-table th { position:sticky; top:0; }
.history-table caption { text-align:left; color:var(--color-muted); padding-bottom:var(--space-sm); }
.activity-chart { display:block; width:100%; height:auto; margin-block:var(--space-md); }
.chart-axis { stroke:var(--color-rule); }
.chart-label { fill:var(--color-muted); font:var(--text-sm) var(--font-body); }
.chart-online { fill:var(--color-accent); }
.chart-offline { fill:var(--color-error); }
.owner-description { white-space:pre-wrap; overflow-wrap:anywhere; margin-block:var(--space-md); max-width:75ch; }
.content-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--space-xl); align-items:start; max-width:1100px; }
.form-panel { max-width:640px; }
.form-panel>p { margin-bottom:var(--space-md); }
.form-panel form { display:flex; flex-direction:column; gap:var(--space-md); }
.form-panel form .button { align-self:flex-start; }
.form-panel form label { display:block; }
.form-panel form .checkbox-row { display:flex; }
.form-panel input+label { margin-top:var(--space-xs); }
.form-help,.muted { color:var(--color-muted); font-size:var(--text-sm); line-height:1.6; }
.form-help { max-width:65ch; }
.form-help a { color:var(--color-ink-2); }
.notice { padding:var(--space-md); background:var(--color-paper-2); border:1px solid var(--color-control-edge); margin-bottom:var(--space-lg); color:var(--color-ink-2); font-size:var(--text-sm); }
.panel .notice { padding-left:var(--space-sm); background:var(--color-clear); }
.notice.error { border-color:var(--color-error); color:var(--color-error); }
.notice.success { border-color:var(--color-success); color:var(--color-success); }
.notice p+p { margin-top:var(--space-xs); }
.favorite-tools { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-md); margin-bottom:var(--space-lg); font-size:var(--text-sm); color:var(--color-muted); }
.account-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:var(--gap-columns); align-items:start; }
.account-wide { grid-column:1/-1; }
.claim-steps { padding-left:var(--space-lg); margin-block:var(--space-md); }
.claim-steps>li { margin-bottom:var(--space-lg); }
.claim-steps p { margin-block:var(--space-xs); }
.account-section { margin-bottom:var(--space-xl); }
.account-section>h2 { margin-bottom:var(--space-md); }
.account-list { padding:0; margin:0; list-style:none; }
.account-list>li,.account-list>article { padding-block:var(--space-md); border-bottom:1px solid var(--color-rule); }
.account-list>li:first-child { border-top:1px solid var(--color-rule); }
.account-list h3 { margin-bottom:var(--space-xs); }
.account-list p { color:var(--color-muted); font-size:var(--text-sm); }
.account-list .actions { margin-block:var(--space-sm) 0; }
.account-meta { display:flex; flex-wrap:wrap; gap:var(--space-sm); align-items:center; color:var(--color-muted); font-size:var(--text-sm); margin-block:var(--space-xs) var(--space-md); }
.account-meta>div { min-width:0; max-width:100%; }
.account-meta dd { margin:0; overflow-wrap:anywhere; }
.checkbox-row { display:flex; align-items:flex-start; gap:var(--space-sm); min-height:44px; padding-block:var(--space-xs); }
.checkbox-row>input { margin-top:var(--space-2xs); }
.code-block { display:block; max-width:100%; overflow:auto; padding:var(--space-md); border:1px solid var(--color-rule); font-family:var(--font-outlier); font-size:var(--text-sm); white-space:pre-wrap; word-break:break-word; margin-block:var(--space-md); }
.honeypot { position:absolute; width:1px; height:1px; overflow:clip; clip-path:inset(50%); white-space:nowrap; }
.prose { max-width:72ch; color:var(--color-ink-2); line-height:1.75; }
.prose h1,.prose h2,.prose h3 { color:var(--color-ink); }
.prose h2 { margin-block:var(--space-xl) var(--space-md); }
.prose p,.prose ul,.prose ol { margin-bottom:var(--space-md); }
.prose li { margin-bottom:var(--space-xs); }
.prose ol,.prose ul { padding-left:var(--space-lg); }
.prose code,.prose kbd { background:var(--color-paper-3); padding:var(--space-2xs) var(--space-xs); border-radius:var(--radius-input); }
.article { margin-block:var(--space-xl); }
.article .lede { margin-block:var(--space-md) var(--space-lg); }
.footer { margin-top:var(--space-2xl); border-top:1px solid var(--color-rule); padding-block:var(--space-lg); }
.footer-inner { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); gap:var(--gap-columns); font-size:var(--text-sm); color:var(--color-muted); }
.footer-brand { display:inline-block; margin-bottom:var(--space-xs); color:var(--color-ink); font-weight:var(--weight-medium); text-decoration:none; font-size:var(--text-md); }
.footer-inner nav { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-xs); }
.footer-inner nav a { display:inline-flex; align-items:center; min-height:28px; text-decoration:none; }
.footer-inner nav a:hover { text-decoration:underline; }
.footer-note { max-width:40ch; }
#toast { position:fixed; bottom:var(--space-lg); left:50%; z-index:var(--z-toast); max-width:calc(100% - 32px); padding:var(--space-sm) var(--space-md); border-radius:var(--radius-input); background:var(--color-accent); color:var(--color-accent-ink); font-size:var(--text-sm); opacity:0; pointer-events:none; transform:translateX(-50%); transition:opacity var(--dur-micro) var(--ease-out); }
#toast.visible { opacity:1; }
@media(min-width:961px) { .filter-disclosure>summary { pointer-events:none; list-style:none; } .filter-disclosure>summary::after { content:none; } }
@media(max-width:1150px) { .nav { gap:var(--space-lg); } .primary-nav { gap:var(--space-md); } .directory { grid-template-columns:220px minmax(0,1fr); } th,td { padding-inline:var(--space-xs); } .server-main { width:38%; } .status-cell { min-width:120px; } }
@media(max-width:960px) { .nav { flex-wrap:wrap; gap:var(--space-sm) var(--space-lg); padding-block:var(--space-sm); } .brand { margin-right:auto; } .primary-nav { order:3; width:100%; justify-content:flex-start; gap:var(--space-lg); overflow-x:auto; } .nav-actions { margin-left:auto; } .directory { grid-template-columns:minmax(0,1fr); } .filter-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:var(--space-sm); gap:var(--space-md); } .filter-form>.field:first-child { grid-column:1/-1; } .search-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; } .filter-pair { grid-column:1/3; } .filter-form>.button { align-self:end; } .filter-form>.clear { align-self:end; } .sidebar-help { display:none; } .detail-grid,.account-grid { grid-template-columns:minmax(0,1fr); } .content-grid { gap:var(--space-lg); } .browse-index { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .page-heading { flex-direction:column; gap:var(--space-md); padding-top:var(--space-lg); } .page-heading>h1+.lede { align-self:auto; } .directory-links { justify-content:flex-start; gap:var(--space-xs) var(--space-lg); } .stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-md); } .stats>div { padding-left:var(--space-md); } .stats>div:nth-child(3) { padding-left:0; border-left:0; } .server-table table,.server-table tbody { display:block; } .server-table thead { position:absolute; width:1px; height:1px; overflow:clip; clip-path:inset(50%); } .server-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:var(--space-md) 0; column-gap:var(--space-sm); row-gap:var(--space-md); border-top:1px solid var(--color-rule); } .server-row:last-child { border-bottom:1px solid var(--color-rule); } .server-row td { border:0; padding:0; min-width:0; max-width:none; width:auto; } .server-row .server-main { grid-column:1/-1; grid-row:1; } .server-name { min-height:44px; padding-right:calc(33.333% + var(--space-xs)); white-space:normal; overflow-wrap:anywhere; } .server-row td[data-label]::before { content:attr(data-label); display:block; color:var(--color-muted); font-size:var(--text-sm); margin-bottom:var(--space-2xs); } .server-row .save-cell { grid-column:3; grid-row:1; align-self:start; } .save-cell .button { width:100%; min-width:0; padding-inline:var(--space-xs); white-space:normal; overflow-wrap:anywhere; } .server-row .map-cell { grid-column:1; grid-row:2; } .server-row .players-cell { grid-column:2; grid-row:2; } .server-row .status-cell { grid-column:3; grid-row:2; } .status-cell small { max-width:none; font-size:var(--text-sm); } .map-cell { overflow-wrap:anywhere; } .results-head { align-items:flex-start; } .results-head>a { max-width:17ch; text-align:right; } .directory-guide,.content-grid,.browse-index { grid-template-columns:minmax(0,1fr); } .footer-inner { grid-template-columns:repeat(2,minmax(0,1fr)); } .footer-note { grid-column:1/-1; max-width:70ch; } .panel { padding:var(--space-md); } .content-grid .form-panel { max-width:none; } }
@media(max-width:480px) { .brand { font-size:var(--text-xl); gap:var(--space-xs); } .brand svg { width:28px; height:28px; } .nav-actions { gap:var(--space-sm); } .nav-actions .button { padding-inline:var(--space-xs); } .primary-nav { justify-content:space-between; gap:var(--space-sm); } .primary-nav>a { font-size:var(--text-sm); gap:var(--space-2xs); } .page-heading h1,.detail-hero h1 { font-size:var(--text-2xl); } .filter-form { grid-template-columns:repeat(2,minmax(0,1fr)); } .filter-pair { grid-column:1/-1; } .filter-form>.clear { grid-column:1/-1; } .filter-form>.button { min-height:44px; } .filter-form>.field:last-of-type { grid-column:1; } .actions { gap:var(--space-xs); } .footer-inner { grid-template-columns:minmax(0,1fr); } .footer-note { grid-column:auto; } .details dl>div { flex-wrap:wrap; gap:var(--space-xs); } .details dd { text-align:left; } }

/* Compact directory revision: one server per row, no row actions beyond copying. */
.nav { min-height:58px; gap:var(--space-lg); }
.brand { gap:var(--space-xs); font-size:22px; color:var(--color-ink); }
.brand-initials { font-weight:800; color:var(--color-accent); letter-spacing:-1px; }
.brand>span:last-child { font-weight:600; }
.page-heading { padding-block:var(--space-lg) var(--space-sm); align-items:center; }
.directory-links a { font-size:var(--text-sm); color:var(--color-accent); }
.directory-stats { display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-lg); padding-block:var(--space-xs); margin-bottom:var(--space-md); border:0; }
.directory-stats>div { flex-direction:row-reverse; align-items:baseline; padding:0; border:0; gap:var(--space-xs); }
.directory-stats dd { font-size:var(--text-sm); }
.directory-stats dt { font-size:var(--text-sm); }
.compact-directory { display:block; }
.compact-filters { position:relative; border:1px solid var(--color-rule); padding:var(--space-sm) var(--space-md); margin-bottom:var(--space-sm); }
.compact-search { display:grid; grid-template-columns:minmax(280px,2fr) repeat(3,minmax(0,1fr)); gap:var(--space-xs) var(--space-md); margin:0; }
.compact-search>.field:first-child { grid-column:auto; }
.compact-search .field { gap:var(--space-2xs); }
.compact-search .search-controls { display:flex; flex-direction:row; gap:var(--space-xs); }
.compact-search input,.compact-search select,.compact-search .button { min-height:36px; padding:var(--space-xs); }
.compact-search .search-controls input { flex:1; width:0; }
.extra-filters { grid-column:1/-1; min-width:0; }
.extra-filters>summary { cursor:pointer; color:var(--color-accent); font-size:var(--text-sm); min-height:28px; width:max-content; padding-block:var(--space-2xs); }
.extra-filter-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:end; gap:var(--space-sm); padding-block:var(--space-xs) var(--space-xl); }
.extra-filter-grid .filter-pair { grid-column:auto; }
.compact-search>.clear { position:absolute; bottom:var(--space-sm); right:var(--space-md); min-height:28px; font-size:var(--text-sm); }
.results-head { margin:0; min-height:40px; }
.results-head h2 { font-size:var(--text-md); }
.facet-links { display:flex; gap:var(--space-md); font-size:var(--text-sm); }
.facet-links a,.popular-categories a { color:var(--color-accent); text-decoration:none; }
.facet-links a:hover,.popular-categories a:hover { text-decoration:underline; }
.dense-table table { table-layout:fixed; }
.dense-table th,.dense-table td { padding:var(--space-2xs) var(--space-sm); height:36px; line-height:1.3; }
.dense-table th { font-size:13px; height:34px; }
.dense-table th:first-child { width:36%; }
.dense-table th:nth-child(2) { width:190px; }
.dense-table th:nth-child(3) { width:98px; }
.dense-table th:nth-child(4) { width:145px; }
.dense-table th:nth-child(5) { width:120px; }
.dense-table th:nth-child(6) { width:100px; }
.dense-table tbody tr:nth-child(even) { background:var(--color-paper-2); }
.dense-table tbody tr:hover { background:var(--color-paper-3); }
.dense-table .server-main { width:auto; max-width:none; }
.server-identity { display:flex; align-items:center; gap:var(--space-xs); min-width:0; }
.dense-table .server-name { min-width:0; font-size:14px; font-weight:600; line-height:1.4; padding:0; min-height:0; white-space:nowrap; color:var(--color-accent); }
.country-flag { display:inline-block; width:20px; height:15px; object-fit:cover; flex-shrink:0; border:1px solid var(--color-rule); vertical-align:-2px; }
.country-flag-link { display:inline-flex; align-items:center; min-width:24px; min-height:24px; flex-shrink:0; }
.password-icon { width:14px; height:14px; fill:none; stroke:var(--color-muted); stroke-width:1.5; }
.dense-table .server-address { flex-wrap:nowrap; gap:var(--space-2xs); }
.dense-table .server-address code { white-space:nowrap; font-size:12px; color:var(--color-ink-2); }
.dense-table .icon-button { min-width:26px; min-height:26px; padding:var(--space-2xs); margin:0; }
.dense-table .icon-button svg { width:14px; height:14px; }
.dense-table .map-cell,.dense-table .mode-cell,.dense-table .players-cell,.dense-table .status-cell { min-width:0; max-width:none; font-size:13px; }
.dense-table .map-cell a,.dense-table .mode-cell a { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; color:var(--color-ink-2); }
.dense-table .map-cell a:hover,.dense-table .mode-cell a:hover { text-decoration:underline; }
.dense-table .players-cell strong { display:inline; }
.bot-count { display:block; color:var(--color-muted); font-size:11px; white-space:nowrap; }
.dense-table .status { font-size:12px; font-weight:400; }
.pagination { margin-block:var(--space-sm); }
.popular-categories { display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-lg); padding-block:var(--space-md); margin-top:var(--space-sm); border-top:1px solid var(--color-rule); font-size:var(--text-sm); }
.popular-categories a { display:inline-flex; align-items:center; gap:var(--space-xs); min-height:28px; }
.country-label { display:inline-flex; align-items:center; gap:var(--space-xs); }
.footer { margin-top:var(--space-xl); }
@media(max-width:1100px) {
 .dense-table th:first-child { width:auto; } .dense-table th:nth-child(2) { width:180px; } .dense-table th:nth-child(3) { width:85px; } .dense-table th:nth-child(4) { width:125px; } .dense-table th:nth-child(5) { width:105px; } .dense-table th:nth-child(6) { width:85px; }
 .compact-search { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .compact-search>.field:first-child { grid-column:1/-1; }
}
@media(max-width:700px) {
 .page-heading { gap:var(--space-xs); align-items:flex-start; padding-top:var(--space-md); }
 .page-heading .lede { font-size:var(--text-sm); }
 .directory-links a { min-height:28px; }
 .directory-stats { gap:var(--space-2xs) var(--space-md); margin-bottom:var(--space-sm); }
 .directory-stats>div:nth-child(3) { padding:0; }
 .directory-stats dt { font-size:12px; }
 .compact-filters { padding:var(--space-xs); }
 .compact-search { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-xs); }
 .compact-search>.field:first-child { grid-column:1/-1; }
 .compact-search>.field:nth-child(4) { grid-column:1/-1; }
 .compact-search input,.compact-search select,.compact-search .button { min-height:40px; }
 .extra-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .extra-filter-grid .filter-pair { grid-column:1/-1; }
 .compact-search>.clear { right:var(--space-xs); bottom:var(--space-xs); }
 .facet-links { gap:var(--space-sm); font-size:12px; }
 .dense-table .server-row { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.8fr); gap:var(--space-3xs) var(--space-xs); padding:var(--space-xs); border-top:0; border-bottom:1px solid var(--color-rule); }
 .dense-table .server-row td { height:auto; padding:0; border:0; width:auto; }
 .dense-table .server-row .server-main { grid-column:1/-1; grid-row:1; }
 .dense-table .server-name { min-height:28px; display:flex; align-items:center; white-space:normal; overflow-wrap:anywhere; font-size:13px; }
 .dense-table .server-row .address-cell { grid-column:1/3; grid-row:2; }
 .dense-table .server-row .players-cell { grid-column:3; grid-row:2; text-align:right; }
 .dense-table .server-row .map-cell { grid-column:1; grid-row:3; }
 .dense-table .server-row .mode-cell { grid-column:2; grid-row:3; }
 .dense-table .server-row .status-cell { grid-column:3; grid-row:3; text-align:right; }
 .dense-table .server-row td[data-label]::before { display:none; }
 .dense-table .server-row .players-cell::before { display:inline; content:attr(data-label) " "; font-size:11px; }
 .dense-table .bot-count { display:inline; margin-left:var(--space-2xs); }
 .dense-table .server-address { min-height:30px; }
 .dense-table .icon-button { min-width:30px; min-height:30px; }
 .dense-table .map-cell a,.dense-table .mode-cell a { min-height:24px; display:flex; align-items:center; font-size:12px; }
 .dense-table .status { line-height:24px; }
}

.admin-nav { display:flex; flex-wrap:wrap; gap:var(--space-lg); margin-bottom:var(--space-lg); border-bottom:1px solid var(--color-rule); }
.admin-nav a { display:inline-flex; align-items:center; min-height:40px; font-size:var(--text-sm); color:var(--color-accent); text-decoration:none; }
.admin-nav a[aria-current] { color:var(--color-ink); box-shadow:inset 0 -2px var(--color-accent); }
.admin-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--space-md); margin:0 0 var(--space-lg); padding:var(--space-md) 0; border-bottom:1px solid var(--color-rule); }
.admin-metrics dt { color:var(--color-muted); font-size:var(--text-sm); }
.admin-metrics dd { margin:0; font-size:var(--text-2xl); font-weight:600; }
.admin-search { display:flex; align-items:end; flex-wrap:wrap; gap:var(--space-md); margin-bottom:var(--space-md); }
.admin-search .field { flex:1; min-width:200px; }
.admin-table { overflow:auto; border:1px solid var(--color-rule); margin-block:var(--space-sm); }
.admin-table td { font-size:var(--text-sm); max-width:360px; overflow-wrap:anywhere; }
.admin-table a { color:var(--color-accent); }
.admin-table code { white-space:nowrap; }
.admin-health { margin-block:var(--space-md); }
.admin-health>div { display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-lg); padding:var(--space-xs) 0; border-bottom:1px solid var(--color-rule); }
.admin-health dt { width:160px; color:var(--color-muted); font-size:var(--text-sm); }
.admin-health dd { margin:0; font-size:var(--text-sm); }
.admin-server-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-xl); }
.audit-reason { white-space:pre-wrap; }
@media(max-width:700px) { .admin-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .admin-server-grid { grid-template-columns:minmax(0,1fr); gap:var(--space-md); } .admin-nav { gap:var(--space-md); } }
.main-filters { display:block; grid-column:2/-1; min-width:0; }
.basic-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-xs) var(--space-md); }
.main-filters>summary { display:none; }
.browse-group:only-child { grid-column:1/-1; }
.browse-group:only-child .taxon-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 var(--space-lg); }
@media(max-width:1100px) { .compact-search>.field:first-child { grid-column:1/-1; } .main-filters { grid-column:1/-1; } }
@media(max-width:700px) {
 .main-filters { display:block; grid-column:1/-1; }
 .main-filters>summary { display:list-item; cursor:pointer; color:var(--color-accent); font-size:var(--text-sm); min-height:28px; padding-block:var(--space-2xs); width:max-content; }
 .basic-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-xs); padding-top:var(--space-xs); }
 .basic-filters>.field:nth-child(3) { grid-column:1/-1; }
 .basic-filters>.extra-filters { padding-bottom:28px; }
 .browse-group:only-child .taxon-list { grid-template-columns:minmax(0,1fr); }
 .primary-nav { justify-content:flex-start; }
}
@media(max-width:700px) {
 .nav { padding-block:var(--space-xs); row-gap:var(--space-2xs); }
 .primary-nav { gap:var(--space-xs); }
 .primary-nav>a { min-height:36px; font-size:12px; }
 .fav-count { font-size:12px; min-width:10px; }
 body[data-page="catalog"] .page-heading .lede,body[data-page="catalog"] .directory-links { display:none; }
 .directory-stats { gap:var(--space-xs) var(--space-sm); padding-block:var(--space-2xs); }
 .directory-stats>div { gap:var(--space-2xs); }
 .dense-table .server-row { padding:var(--space-2xs) var(--space-xs); }
 .dense-table .server-name { min-height:24px; }
 .dense-table .server-address { min-height:24px; }
 .dense-table .icon-button { min-height:24px; min-width:24px; }
 .dense-table .map-cell a,.dense-table .mode-cell a { min-height:20px; }
 .dense-table .status { line-height:20px; }
}