/* The OT server list (list.drenoxbot.com): only what base.css and app.css do not already have. */

/* The list beside its side banner; one column until the screen is wide enough for both. */
.lt-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.lt-side { display: grid; gap: 16px; }
@media (min-width: 1100px) { .lt-main { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 1099px) { .lt-side .lt-slot-side { display: none; } }
.lt-main .filters { margin-bottom: 12px; }
.lt-stats { margin-bottom: 24px; }

/* Rows */
.lt-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font: 400 .78rem/1.3 var(--mono); color: var(--muted); }
.lt-addr span { overflow-wrap: anywhere; }
.lt-copy { font: 500 .68rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.lt-copy:hover { color: var(--cyan); }
/* ponytail: the country as a 2-letter chip; real flags when we ship a sprite. */
.lt-flag { padding: 2px 5px; border: 1px solid var(--line-2); background: var(--ink-2); font: 600 .64rem/1 var(--mono); letter-spacing: .06em; color: var(--text); }
td.name a { color: var(--text); text-decoration: none; }
td.name a:hover { color: var(--cyan); }
tr.lt-premium td { background: rgba(232, 182, 62, .06); }
tr.lt-premium td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.pager a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 8px; border: 1px solid var(--line-2); color: var(--muted); font: 500 .85rem/1 var(--mono); text-decoration: none; }
.pager a:hover { color: var(--text); border-color: var(--text); }
.pager a[aria-current="page"] { background: var(--cyan); border-color: var(--cyan); color: var(--cyan-ink); }

/* Featured and coming-soon cards */
.lt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.lt-card { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border: 1px solid var(--line-2); border-left: 3px solid var(--warn); background: var(--panel); }
.lt-card > a { font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.lt-card > a:hover { color: var(--cyan); }
.lt-card .muted { font-size: .82rem; }
.lt-card .countdown { font-size: var(--step-1); }

/* Banner slots: 728x90 on top, 300x250 on the side. Empty, they are the "advertise here" call. */
.lt-slot { display: block; margin-bottom: 24px; }
.lt-slot a, .lt-slot img { display: block; }
.lt-slot img { border: 1px solid var(--line); object-fit: cover; }
.lt-slot-top { max-width: 728px; margin-inline: auto; }
.lt-slot-top img { width: 100%; aspect-ratio: 728 / 90; }
.lt-slot-side { width: 300px; margin-bottom: 0; }
.lt-slot-side img { width: 300px; aspect-ratio: 300 / 250; }
.lt-slot-empty { display: grid; place-content: center; justify-items: center; gap: 6px; border: 1px dashed var(--line-2); color: var(--muted); text-decoration: none;
  font: 700 .82rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.lt-slot-empty small { font: 500 .68rem/1 var(--mono); color: var(--dim); }
.lt-slot-empty:hover { border-color: var(--cyan); color: var(--cyan); }
.lt-slot-top.lt-slot-empty { aspect-ratio: 728 / 90; min-height: 64px; }
.lt-slot-side.lt-slot-empty { aspect-ratio: 300 / 250; }

/* A server's page */
.lt-text, .lt-motd { white-space: pre-line; overflow-wrap: anywhere; color: var(--muted); max-width: 72ch; }
.lt-motd { padding: 12px 16px; border-left: 3px solid var(--line-2); background: var(--ink-2); font: 400 .88rem/1.5 var(--mono); }
.lt-chart { border: 1px solid var(--line); background: var(--ink-2); padding: 8px; }
.lt-chart svg { display: block; width: 100%; height: auto; }
.lt-chart .grid { stroke: var(--line); stroke-width: 1; }
.lt-chart .ax { fill: var(--dim); font: 500 11px var(--mono); }
.lt-chart .line { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linejoin: round; }
.lt-chart .area { fill: rgba(35, 213, 255, .1); }
.lt-chart .pt { fill: transparent; }
.lt-chart .pt:hover { fill: var(--cyan); }

/* Member pages: forms, the claim token, my servers */
.lt-form { display: grid; gap: 14px; max-width: 640px; }
.lt-form .actions, .lt-mine .actions, .licence-card .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lt-token { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lt-token code { padding: 8px 12px; border: 1px solid var(--cyan); background: var(--ink); font: 600 1rem/1.2 var(--mono); color: var(--cyan); user-select: all; overflow-wrap: anywhere; }
.lt-mine { display: grid; gap: 14px; padding-block: 28px; border-bottom: 1px solid var(--line); }
.lt-mine:first-child { padding-top: 0; }
.lt-mine h2 { font-size: var(--step-1); text-transform: uppercase; }
.lt-mine summary { cursor: pointer; color: var(--muted); margin-bottom: 12px; }
.lt-mine .sub-head { margin: 0; }
.lt-thumb { max-width: 240px; max-height: 90px; border: 1px solid var(--line); object-fit: contain; }
.lt-ad .hint { margin-left: 4px; }

/* Ad plans */
.plan-card.on { border-color: var(--cyan); }
.lt-pay { margin-block: 28px; }
.lt-providers { display: grid; gap: 10px; }
.lt-qr { background: #fff; padding: 8px; }
/* The list page in miniature: top banner, featured strip, coming soon, the table, side banner. */
.lt-mock { display: grid; grid-template-columns: 1fr 1fr 28%; grid-template-rows: 10px 14px 34px; gap: 4px; padding: 8px; border: 1px solid var(--line); background: var(--ink); }
.lt-mock i { background: var(--line); }
.lt-mock i:nth-child(1) { grid-column: 1 / -1; }
.lt-mock i:nth-child(4) { grid-column: 1 / 3; }
.lt-mock i:nth-child(5) { grid-column: 3; grid-row: 2 / 4; }
.lt-mock-banner-top i:nth-child(1), .lt-mock-premium i:nth-child(2), .lt-mock-soon i:nth-child(3), .lt-mock-banner-side i:nth-child(5) { background: var(--cyan); }