/*
  servermod.app - the stylesheet for the three static pages.

  THIS IS NOT THE ONLY STYLESHEET ON THE SITE
  It dresses index.html, privacy.html and terms.html, which are files in this
  directory. The leaderboard, the profile pages and the appeals flow are
  rendered by the server and carry assets/leaderboard.css instead, which ships
  in the image rather than here - so pointing PUBLIC_STATIC_DIR at a different
  folder replaces these three pages and cannot take the rest of the site's
  styling with it. The tokens below are the same in both files and have to be
  kept in step by hand.

  The tokens are copied from ServerMod's dashboard/static/css/dashboard.css and
  likewise kept in step by hand if the theme moves. servermod.app is a different
  origin from every instance dashboard and must not depend on one being
  reachable, which is why they are copied rather than linked.

  Single dark theme on purpose: the product is dark-only, and a light
  servermod.app would not read as the same software.
*/
:root {
  --sm-bg-base: #0e1116;
  --sm-bg-raised: #181d27;
  --sm-bg-deep: #11151d;
  --sm-bg-hover: #1e2530;
  --sm-text: #e8ecf2;
  --sm-text-muted: #aab3c2;
  --sm-text-dim: #79839a;
  --sm-text-faint: #5a6376;
  --sm-accent: #4d97a1;
  --sm-accent-hover: #6cacb5;
  --sm-accent-ghost: rgba(77,151,161,0.12);
  --sm-warning: #cf9f4e;
  --sm-border: rgba(255,255,255,0.07);
  --sm-border-strong: rgba(255,255,255,0.13);
  --sm-pill-bg: rgba(77,151,161,0.16);
  --sm-pill-border: rgba(77,151,161,0.26);
  --sm-font-ui: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sm-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  --doc-width: 74ch;
}

* { box-sizing: border-box; }
* { scrollbar-width: thin; scrollbar-color: #4a4d56 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #3a3d44; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #4a4d56; background-clip: content-box; }

html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--sm-font-ui);
  background: var(--sm-bg-base);
  color: var(--sm-text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  /* A column at least as tall as the viewport, so `margin-top: auto` on the
     corner links reaches the bottom of the SCREEN on a short page and the
     bottom of the CONTENT on a long one. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

a { color: var(--sm-accent); text-decoration: none; }
a:hover { color: var(--sm-accent-hover); text-decoration: underline; }
a:focus-visible { outline: 1px solid var(--sm-accent); outline-offset: 2px; }

/* The topbar is gone entirely - no bar, no mark, no links. A page opens on its
   own content, and the two documents are reached from the corner links at the
   bottom. */

/* ============== Hero ============== */
.hero {
  padding: 4.5rem 1.5rem 3.5rem;
  border-bottom: 1px solid var(--sm-border);
  background:
    radial-gradient(80rem 26rem at 50% -12rem, rgba(77,151,161,0.10), transparent 70%),
    var(--sm-bg-base);
}
.hero-inner { max-width: 60ch; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; }
.hero-mark { width: 104px; height: 104px; object-fit: contain; }
.hero h1 { margin: 0; font-size: clamp(2.25rem, 6vw, 3.25rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.hero .lede { margin: 0; font-size: 1.08rem; color: var(--sm-text-muted); text-wrap: balance; }
/* .hero .eyebrow removed with the landing copy it labelled. */
/* .hero-docs and .doc-btn stay removed - the two documents are reached from the
   corner links at the bottom, not from buttons under the mark. `.door` came
   back when the landing page gained somewhere to go: the leaderboard and the
   appeals flow are both public, both live on this origin, and a front page that
   does not link them is a front page nobody can get past. */

/* ============== Doors ============== */
/*
  Two cards under the hero, one per public feature. A grid rather than a flex
  row so both are the same height whatever their copy runs to, and one column
  below 34rem, where two would leave each about as wide as its own text.
*/
.doors {
  /* Wider than .hero-inner's 60ch on purpose: two cards need the room, and the
     hero is centred text where a narrow measure is the point. */
  max-width: 68ch;
  margin: 0 auto;
  /* No top padding — the hero's own 3rem below the lede is the gap. */
  padding: 0 1.5rem 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
.door {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0.35rem 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--sm-bg-raised);
  border: 1px solid var(--sm-border);
  border-radius: 12px;
  color: var(--sm-text);
}
.door:hover {
  background: var(--sm-bg-hover);
  border-color: var(--sm-border-strong);
  color: var(--sm-text);
  text-decoration: none;
}
.door-title { grid-column: 1; grid-row: 1; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
/* Spans both columns on the second row, under the arrow as well as the title —
   two lines of description should not be squeezed into a column an arrow wide. */
.door-say { grid-column: 1 / -1; grid-row: 2; color: var(--sm-text-muted); font-size: 0.9rem; line-height: 1.55; }
/* Placed explicitly beside the TITLE. Left to auto-placement it lands on a row
   of its own under the description, which reads as a stray character. */
.door-go { grid-column: 2; grid-row: 1; color: var(--sm-text-dim); font-size: 1.1rem; line-height: 1.5; }
.door:hover .door-go { color: var(--sm-accent-hover); }

/* ============== Section nav ============== */
.section-nav {
  /* top: 0 — there is no bar above it any more. */
  position: sticky; top: 0; z-index: 15;
  background: rgba(17,21,29,0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sm-border);
  padding: 0 1.5rem;
  overflow-x: auto;
}
.section-nav ul {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 88ch; display: flex; gap: 1.5rem;
  font-size: 0.85rem; white-space: nowrap;
}
.section-nav a {
  display: block; padding: 0.7rem 0; color: var(--sm-text-dim);
  border-bottom: 2px solid transparent;
}
.section-nav a:hover { color: var(--sm-text); text-decoration: none; border-bottom-color: var(--sm-border-strong); }
/* Must come after the base rule: a media query carries no extra specificity,
   so a later top: 57px would beat it at every width. */
@media (max-width: 600px) {
  .section-nav { padding: 0 1rem; }
}

/* ============== Documents ============== */
.doc { padding: 3.5rem 1.5rem 1rem; }
.doc + .doc { border-top: 1px solid var(--sm-border); }
.doc-inner { max-width: var(--doc-width); margin: 0 auto; }

.doc-head { margin-bottom: 2rem; }
/* .doc-kicker removed with the "Document 01" / "Document 02" labels: each
   document is its own page now, so numbering a set of one said nothing. */
.doc h2 { margin: 0 0 0.4rem; font-size: 1.9rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; }
.doc .updated { margin: 0; font-family: var(--sm-font-mono); font-size: 0.78rem; color: var(--sm-text-dim); }

.doc h3 {
  margin: 2.5rem 0 0.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--sm-border);
  font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35;
  display: flex; gap: 0.7rem; align-items: baseline;
}
.doc h3 .n {
  font-family: var(--sm-font-mono); font-size: 0.8rem; font-weight: 500;
  color: var(--sm-accent); flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.doc h4 { margin: 1.75rem 0 0.4rem; font-size: 0.95rem; font-weight: 600; color: var(--sm-text); }
.doc p { margin: 0 0 1rem; color: var(--sm-text-muted); }
.doc p strong, .doc li strong { color: var(--sm-text); font-weight: 600; }
.doc ul { margin: 0 0 1rem; padding-left: 1.15rem; color: var(--sm-text-muted); }
.doc li { margin-bottom: 0.35rem; }
.doc li::marker { color: var(--sm-text-faint); }
.doc code {
  font-family: var(--sm-font-mono); font-size: 0.85em;
  background: var(--sm-bg-deep); color: var(--sm-accent-hover);
  padding: 0.12em 0.38em; border: 1px solid var(--sm-border);
  word-break: break-word;
}

/* A statement that has to survive being skim-read. */
.callout {
  background: var(--sm-accent-ghost);
  border: 1px solid var(--sm-pill-border);
  border-left: 3px solid var(--sm-accent);
  padding: 0.9rem 1.1rem; margin: 1.25rem 0;
}
.callout p { margin: 0; color: var(--sm-text); }
.callout p + p { margin-top: 0.6rem; }
.callout.warn { background: rgba(207,159,78,0.10); border-color: rgba(207,159,78,0.28); border-left-color: var(--sm-warning); }

/* Tables - the dashboard's, squared, scrolling inside their own box. */
.table-wrap { overflow-x: auto; margin: 1.25rem 0; border: 1px solid var(--sm-border); }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 32rem; }
thead th {
  text-align: left; padding: 0.6rem 0.85rem;
  background: var(--sm-bg-deep); color: var(--sm-text-dim);
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  border-bottom: 1px solid var(--sm-border-strong);
}
tbody td { padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--sm-border); color: var(--sm-text-muted); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--sm-bg-hover); }
tbody td:first-child { color: var(--sm-text); font-weight: 500; }

/* .pill / .pill.off removed: declared by the original design and used by
   neither document. */

/* The landing page has no document under it, so its hero owns the screen rather
   than introducing something - and with the topbar gone there is nothing above
   it to be separated from either. */
.hero.hero-lead { padding-top: 6rem; padding-bottom: 3rem; border-bottom: none; }

/* ============== Page links ============== */
/*
  Two links, centred along the bottom, and nothing around them.

  `margin-top: auto` inside the flex column on <body> is what pins them, which
  is why there is no fixed positioning here: on the landing page, shorter than
  the viewport, it puts them at the bottom of the SCREEN, under the mark and on
  its centre line; on a long document it puts them after the text, where a
  reader arrives at them by finishing rather than by having them float over the
  words.
*/
.page-links {
  margin-top: auto;
  padding: 3rem 1.75rem 1.5rem;
  display: flex; align-items: center; gap: 0;
  /* Centred, which on the landing page puts them on the same axis as the mark,
     the name and the line above - one column down the middle rather than a
     centred block with something tucked into a corner beneath it. */
  justify-content: center;
}
/*
  The theme's micro-label: mono, uppercase, tracked out.

  It is the same treatment the document kickers use, which is what makes two
  links alone at the foot of a sparse page read as part of the design rather
  than as the browser's default anchors left where they fell. Small and faint on
  purpose - they are the exits, not the content.
*/
.page-links a {
  font-family: var(--sm-font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sm-text-faint);
  padding: 0.5rem 0;
  /* A rule that is already there and merely colourless, so hovering changes a
     colour rather than adding a box - nothing shifts by a pixel. */
  border-bottom: 1px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.page-links a:hover,
.page-links a:focus-visible {
  color: var(--sm-accent);
  border-bottom-color: var(--sm-accent);
  text-decoration: none;
  outline: none;
}
/* A hairline between them rather than a middot: the divider is furniture, and a
   character would sit inside the tracking and read as part of a word. */
.page-links a + a { margin-left: 1.15rem; padding-left: 1.15rem; border-left: 1px solid var(--sm-border); }
/* The left rule must not pick up the hover underline's colour, and the bottom
   rule must not run under the divider. */
.page-links a + a:hover, .page-links a + a:focus-visible { border-left-color: var(--sm-border); }

@media (max-width: 480px) {
  .page-links { padding: 2.5rem 1.25rem 1.25rem; }
}

/* The closing statement each document now carries, since the footer that used
   to hold it is gone. */
.doc-close {
  margin: 2.5rem 0 0; padding-top: 1.25rem;
  border-top: 1px solid var(--sm-border);
  font-size: 0.8rem; color: var(--sm-text-faint);
}
.doc-close a { color: var(--sm-text-dim); }
.doc-close a:hover { color: var(--sm-accent); }