/* Same font files and stacks as the server MOTD. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/barlow-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700.woff2) format("woff2"); }

:root {
  color-scheme: dark;
  --bg-0: oklch(0.17 0.006 260);
  --bg-1: oklch(0.205 0.007 260);
  --bg-2: oklch(0.245 0.008 260);
  --line: oklch(0.30 0.008 260);
  --fg-0: oklch(0.96 0.004 260);
  --fg-1: oklch(0.80 0.006 260);
  --fg-2: oklch(0.66 0.008 260);
  --fg-3: oklch(0.62 0.009 260);
  --blue: oklch(0.64 0.151 258);       /* the fill blue one step lighter; closed-tab digits, 4.8:1 on the tab */
  --blue-fill: oklch(0.54 0.151 258);      /* the MOTD button blue; fill for the open rule's tab, light digits */

  --sev-warn: oklch(0.80 0.09 245);
  --sev-soft: oklch(0.81 0.12 155);
  --sev-kick: oklch(0.86 0.13 92);
  --sev-temp: oklch(0.80 0.13 58);
  --sev-year: oklch(0.78 0.128 22);
  --sev-perm: oklch(0.82 0.101 18);

  --font-ui: "Barlow", "Segoe UI", system-ui, sans-serif;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --hairline: 1px;
}
@media (min-resolution: 2dppx) { :root { --hairline: 0.5px; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}
a { color: inherit; text-decoration-thickness: from-font; text-underline-offset: 0.15em; text-decoration-skip-ink: auto; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--fg-0); } }
:focus-visible { outline: 2px solid rgb(255 255 255 / 0.6); outline-offset: 2px; }
button { touch-action: manipulation; }
::selection { background: color-mix(in oklch, var(--blue) 30%, transparent); }
[id] { scroll-margin-top: 24px; }
strong, b { font-weight: 600; }
h1, h2 { margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Admin-only content. The root attribute is the only switch; without JS the player view renders. */
html:not([data-view="admin"]) [data-admin] { display: none !important; }

.sev-warn { --sev: var(--sev-warn); }
.sev-soft { --sev: var(--sev-soft); }
.sev-kick { --sev: var(--sev-kick); }
.sev-temp { --sev: var(--sev-temp); }
.sev-year { --sev: var(--sev-year); }
.sev-perm { --sev: var(--sev-perm); }

main { max-width: 800px; margin: 0 auto; padding: 40px 24px 120px; }

.bar { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--fg-2); }
.count { font-variant-numeric: tabular-nums; }
.count .adm { margin-left: 12px; font-weight: 600; color: var(--sev-year); }
.toggle-all { min-height: 44px; padding: 0; border: 0; background: none; color: var(--fg-1); font: inherit; cursor: pointer; transition: color 150ms ease-out; }
@media (hover: hover) and (pointer: fine) { .toggle-all:hover { color: var(--fg-0); } }
.toggle-all:active { color: var(--fg-2); }

.rule { background: var(--bg-1); }
.rule + .rule { margin-top: 10px; }
summary { display: grid; grid-template-columns: 56px 1fr 20px; column-gap: 16px; align-items: start; padding: 0 16px 0 0; min-height: 56px; cursor: pointer; list-style: none; transition: background-color 150ms ease-out; }
summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  summary:hover { background: var(--bg-2); }
  summary:hover .plus { color: var(--fg-1); }
}
summary:focus-visible { outline: 2px solid rgb(255 255 255 / 0.6); outline-offset: 2px; }
.num { width: 56px; height: 56px; display: grid; place-items: center; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: 0.02em; color: var(--blue); background: var(--bg-2); font-variant-numeric: tabular-nums; transition: background-color 150ms ease-out, color 150ms ease-out; }
details[open] .num { background: var(--blue-fill); color: var(--fg-0); }
h2 { font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--fg-0); text-wrap: pretty; padding: 16.5px 0; }
.plus { margin-top: 20px; color: var(--fg-3); transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1), color 150ms ease-out; }
details[open] .plus { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .plus { transition: color 150ms ease-out; } }

.detail { padding: 4px 20px 20px 72px; }
.body { font-size: 15.5px; line-height: 1.6; color: var(--fg-1); max-width: 62ch; text-wrap: pretty; }
.body p + p, .body ul + p, .body p + ul { margin-top: 10px; }
.body li { list-style: none; padding-left: 16px; position: relative; }
.body li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 8px; height: 2px; background: var(--fg-3); }
.body li + li { margin-top: 6px; }
.note { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--fg-2); max-width: 62ch; }
.note b { color: var(--fg-1); }

.proc { margin-top: 16px; }
.ladder + .ladder { margin-top: 14px; }
.ladder-label { font-size: 14px; color: var(--fg-1); margin-bottom: 8px; }
.ladder-eg { font-size: 13px; color: var(--fg-2); font-style: italic; margin-top: 8px; max-width: 60ch; }
.ladder-eg strong { font-style: normal; color: var(--fg-1); }
.seq { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; line-height: 1.4; }
.seq-label { color: var(--fg-3); margin-right: 2px; }
.step { display: inline-flex; align-items: center; gap: 7px; color: var(--fg-1); font-weight: 600; white-space: nowrap; }
.step::before { content: ""; width: 8px; height: 8px; background: var(--sev); flex: none; }
.seq .arrow { color: var(--fg-3); }
.chip-inline { color: var(--sev); font-weight: 600; white-space: nowrap; }

.thanks { margin-top: 48px; color: var(--fg-2); font-size: 14px; }

@media (max-width: 520px) {
  main { padding-top: 28px; }
  summary { grid-template-columns: 44px 1fr 20px; column-gap: 12px; padding-right: 12px; }
  .num { width: 44px; height: 56px; font-size: 18px; }
  .detail { padding: 4px 12px 16px 12px; }
}