/* List-card-mobile contract; colour tokens are shared with build_site.py. */
[data-server-list]{min-width:0}
[data-server-list] [hidden],.list-action[hidden]{display:none!important}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.mobile-cards{max-width:520px;margin-inline:auto}
.card{position:relative;min-width:0;padding:16px 16px 0;background:var(--surface);border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule)}
.card-head{display:grid;grid-template-columns:max-content 36px minmax(0,1fr);gap:12px;align-items:start}
.card-rank,.table-rank{font:600 1.3125rem/1 var(--serif);color:var(--accent);font-variant-numeric:tabular-nums}
.card-rank{min-width:1.6em}
.mono-tile{width:36px;height:36px;display:grid;place-items:center;flex:none;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--paper-2);font:600 14px/1 var(--serif);color:var(--ink)}
.server-heading{min-width:0;overflow-wrap:anywhere}
.card-title{font:600 1.3125rem/1.3 var(--serif);margin:0}
.server-title{font:600 1.3125rem/1.3 var(--serif);color:var(--ink);text-decoration:none}
.card .server-title::after{content:"";position:absolute;inset:0}
.card:hover .server-title,.server-title:hover{color:var(--accent);text-decoration:none}
.card:active{background:var(--paper-2)}
[data-server-list] :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card:has(.server-title:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.card-name{font:400 .8125rem/1.4 var(--mono);color:var(--ink-3);margin:2px 0 0;overflow-wrap:anywhere}
.tag-new{display:inline-block;padding:3px 6px;background:var(--mark);color:var(--ink);border-radius:var(--r);font:500 .8125rem/1 var(--sans);text-transform:uppercase;vertical-align:.15em}
.card-desc{margin:8px 0;color:var(--ink-2);font:.9375rem/1.45 var(--sans);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.proof{display:flex;flex-wrap:wrap;gap:2px 12px;margin:0;padding:0;list-style:none;color:var(--ink-2);font:.8125rem/1.5 var(--mono);font-variant-numeric:tabular-nums}
.proof li{min-width:0;overflow-wrap:anywhere}
[data-server-list] .up{color:var(--pos)}
[data-server-list] .down{color:var(--neg)}
[data-server-list] .flat{color:var(--ink-2)}
.actions{position:relative;z-index:1;display:flex;margin-top:12px;border-top:1px solid var(--rule);background:var(--surface)}
.list-action{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;min-height:44px;min-width:44px;padding:8px 4px;background:transparent;border:1px solid var(--rule);border-radius:var(--r);color:var(--ink);font:500 .9375rem/1.25 var(--sans);cursor:pointer}
.actions .list-action{flex:1 1 0;min-width:0;border:0;border-right:1px solid var(--rule);border-radius:0}
.actions .list-action:last-child{border-right:0}
.list-action svg{flex:none}
.action-label{overflow-wrap:anywhere;min-width:0}
.list-action:hover{color:var(--accent)}
.list-action:active{background:var(--paper-2)}
.list-action[disabled]{color:var(--ink-3);cursor:default}
.list-action.is-copied{color:var(--pos);font-weight:600}
.list-action[aria-pressed=true]{color:var(--accent);font-weight:600}
.list-action[aria-pressed=true] svg{fill:currentColor}
.list-vh,.icon-only .action-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.icon-only.is-copied .action-label{position:static;width:auto;height:auto;clip-path:none;white-space:normal}
table.rank-table{display:none;table-layout:fixed;border-top:1px solid var(--rule-strong)}
table.rank-table th,table.rank-table td{padding:12px 8px;overflow-wrap:anywhere}
table.rank-table th{font:500 .8125rem/1.2 var(--sans);letter-spacing:.06em}
table.rank-table th:nth-child(1){width:5%}
table.rank-table th:nth-child(2){width:43%}
table.rank-table th:nth-child(3){width:18%}
table.rank-table th:nth-child(4){width:12%}
table.rank-table th:nth-child(5){width:12%}
table.rank-table th:nth-child(6){width:10%}
table.rank-table td.num{font:.8125rem/1.5 var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:normal}
table.rank-table th.num{text-align:right;white-space:normal}
table.rank-table td.table-rank{font:600 1.3125rem/1 var(--serif)}
.table-server{display:flex;gap:12px;align-items:start}
.table-desc{margin:4px 0 0 48px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2);font:.9375rem/1.45 var(--sans)}
table.rank-table tbody tr:hover{background:var(--paper-2)}
.list-empty,.list-error{color:var(--ink-2);font:.9375rem/1.5 var(--sans)}
[data-clear-filters]{min-height:44px;border:0;background:transparent;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}
.list-loading .card{padding-bottom:16px}
.skeleton-block{display:block;height:16px;margin:8px 0;background:var(--paper-2)}
.skeleton-block:first-child{height:36px;width:75%}
.list-dialog{max-width:min(520px,calc(100% - 32px));width:100%;padding:24px;background:var(--surface);color:var(--ink);border:1px solid var(--rule-strong);border-radius:var(--r);font:.9375rem/1.5 var(--sans)}
.list-dialog::backdrop{background:rgba(26,24,20,.45)}
.list-dialog textarea{display:block;width:100%;min-height:100px;margin:12px 0;padding:8px;color:var(--ink);background:var(--paper-2);border:1px solid var(--rule);font:.8125rem/1.5 var(--mono);resize:vertical}
.list-dialog a,.list-dialog button{display:inline-flex;align-items:center;min-height:44px;margin-right:16px}
.list-dialog button{background:transparent;color:var(--ink);border:1px solid var(--rule);padding:8px;font:inherit;cursor:pointer}
.list-dialog :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(min-width:900px){.mobile-cards{display:none}table.rank-table{display:table}}
@media(prefers-reduced-motion:reduce){[data-server-list] *, .list-dialog *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}