/* Page defaults: a reset, then the body, headings, links, focus, prose. Built on tokens.css. */

/* Reset: browsers' default margins, list bullets, heading sizes and link colours off, so every
   look comes from a component */
*, *::before, *::after { box-sizing: border-box; border: 0 solid; }
/* Room for the scrollbar is kept on short pages too, so pages don't shift sideways between long and short ones */
html { line-height: 1.5; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
/* hidden means hidden, even on components that set their own display (.btn is inline-flex) */
[hidden] { display: none !important; }
/* A group of fields (a fieldset) lays out like its class says, without the browser's frame */
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }
p, figure, blockquote, dl, dd, pre, hr { margin: 0; }
ul, ol, menu { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; background: transparent; }
button, [role=button] { cursor: pointer; }
table { border-collapse: collapse; }
textarea { resize: vertical; }
::placeholder { color: var(--ink-3); opacity: 1; }
/* Remix Icon's placeholder glyph, for icons that haven't loaded */
:where([class^="ri-"])::before { content: "\f3c2"; }

body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); }

/* Page headings, a server's name on its own page included, are set in the console face; the logo
   keeps its pixel font. Big stat numbers (.lb-display) follow. */
h1:not(header h1), .sv-name, .lb-display { font-family: var(--mono); font-weight: 500; letter-spacing: -.02em; }
h1:not(header h1) { margin: 0; font-size: var(--text-2xl); line-height: 1.1; overflow-wrap: anywhere; }

/* Keyboard focus, everywhere */
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Addresses, codes and other things people type; numbers that line up */
.mono { font-family: var(--mono); }
/* Things people type or copy (addresses, codes, cvars) show every character as it is: Fira Code's
   ligatures would turn the x in a code into ×, or :: and -> into symbols */
.mono, .code, .inline-code, .code-block { font-variant-ligatures: none; }
.num { font-variant-numeric: tabular-nums; }

/* Long-form text: about, privacy, terms */
.prose h3 {
    color: var(--ink);
    font-size: var(--text-lg);
    font-weight: 700;
    padding-top: var(--s4);
}

.prose ul {
    list-style: disc;
    padding-left: var(--s5);
}

.prose li + li {
    margin-top: var(--s1);
}

.prose a {
    color: var(--brand);
}

.prose a:hover {
    text-decoration: underline;
}

/* Turkish lowercases I to a dotless ı, so the console voice's lowercase buttons, pills and table heads would turn "IP"
   into "ıp" and "VIP" into "vıp": Turkish pages show those words as written */
:root:lang(tr) *, :root:lang(tr) ::file-selector-button { text-transform: none; }