/* outlink.fun — lo-fi.
   Monospace, 1px rules, square corners, no shadows, no gradients.
   It should read like a directory somebody kept by hand. */

:root {
  --paper: #f2efe6;
  --ink:   #16150f;
  --rust:  #b4410c;
  --rule:  #16150f;
  --dim:   #6f6a5c;
  --ghost: #a6a094;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --w: 64rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12110d;
    --ink:   #e9e4d6;
    --rust:  #ff8a3d;
    --rule:  #4a453a;
    --dim:   #8d8778;
    --ghost: #55503f;
  }
}
:root[data-theme="dark"] {
  --paper: #12110d;
  --ink:   #e9e4d6;
  --rust:  #ff8a3d;
  --rule:  #4a453a;
  --dim:   #8d8778;
  --ghost: #55503f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.25rem 6rem;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.65 var(--mono);
  -webkit-text-size-adjust: 100%;
}

main, .masthead, .foot { max-width: var(--w); margin-inline: auto; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--rust); }

h1, h2, h3 { font-weight: 700; letter-spacing: .01em; line-height: 1.25; }
h1 { font-size: 1.6rem; margin: 2rem 0 .5rem; }
h2 { font-size: 1.05rem; margin: 2.5rem 0 .6rem; text-transform: uppercase; letter-spacing: .12em; }
h2::before { content: "§ "; color: var(--rust); }
h3 { font-size: .95rem; margin: 0 0 .2rem; }

code { font: inherit; background: color-mix(in srgb, var(--ink) 8%, transparent); padding: 0 .25em; }
strong { font-weight: 700; }
.muted { color: var(--dim); }
.small { font-size: .85em; }
.opt { color: var(--dim); font-weight: 400; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--paper); padding: .5rem; z-index: 9; }

/* ------------------------------------------------------------- masthead -- */
.masthead { padding: 2.5rem 0 1.25rem; border-bottom: 1px solid var(--rule); }

.wordmark {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; font-size: 1.5rem; font-weight: 700; letter-spacing: .18em;
}
.wordmark .tld { color: var(--rust); letter-spacing: .04em; }
.wordmark:hover { color: inherit; }

.ring {
  width: 1.1em; height: 1.1em; border: 3px dotted currentColor; border-radius: 50%;
  animation: spin 30s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ring { animation: none; } }

.tagline { margin: .5rem 0 1rem; color: var(--dim); font-size: .9rem; }
.mainnav { font-size: .85rem; color: var(--dim); }
.mainnav a { text-decoration: none; }
body[data-page="board"] .mainnav a[href="/"],
body[data-page="ring"] .mainnav a[href="/ring"],
body[data-page="join"] .mainnav a[href="/join"],
body[data-page="how"] .mainnav a[href="/how"],
body[data-page="log"] .mainnav a[href="/log"],
body[data-page="exploits"] .mainnav a[href="/nice-try"] {
  color: var(--rust); font-weight: 700;
}

/* ------------------------------------------------------------------ lede -- */
.lede { font-size: 1.02rem; max-width: 46rem; }
section.lede { margin: 1.75rem 0 2rem; }
section.lede p { margin: .4rem 0; }

/* ----------------------------------------------------------------- board -- */
.board { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }

.entry { padding: .7rem 0 .6rem; border-bottom: 1px dotted var(--rule); }

.line1 { display: flex; align-items: baseline; gap: .55rem; }
.rank {
  min-width: 2.6ch; text-align: right; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.entry:nth-child(1) .rank, .entry:nth-child(2) .rank, .entry:nth-child(3) .rank {
  color: var(--rust); font-weight: 700;
}
.name { font-weight: 700; text-decoration: none; }
.name:hover { text-decoration: underline; }
.mark-status { color: var(--rust); cursor: help; }

.leader {
  flex: 1 1 auto; min-width: 1.5rem;
  border-bottom: 1px dotted var(--rule);
  transform: translateY(-.28em);
}
.score { font-variant-numeric: tabular-nums; font-weight: 700; }

.line2 {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-left: 3.15ch; margin-top: .1rem;
  font-size: .82rem; color: var(--dim);
}
.tagline2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats { white-space: nowrap; }

/* Narrow screens: stack the second line instead of squeezing the tagline out
   of existence and pushing "details" off the right edge. */
@media (max-width: 42rem) {
  .line2 { flex-direction: column; gap: .15rem; }
  .tagline2 { white-space: normal; overflow: visible; }
  .stats { white-space: normal; }
}
.spark { color: var(--rust); letter-spacing: -.06em; }
.sparkbig { font-size: 2rem; color: var(--rust); letter-spacing: -.05em; line-height: 1; }

.note {
  margin: .35rem 0 0 3.15ch; padding: .3rem .5rem;
  border-left: 2px solid var(--rust); font-size: .82rem; color: var(--dim);
}

.entry.is-grace  .name { opacity: .8; }
.entry.is-fading .name { opacity: .6; }
.entry.is-ghost { color: var(--ghost); }
.entry.is-ghost .name, .entry.is-ghost .score { color: var(--ghost); font-weight: 400; }

.empty { color: var(--dim); padding: 2rem 0; }

/* ------------------------------------------------------------------ form -- */
.card {
  border: 1px solid var(--rule); padding: 1.25rem; margin: 1.5rem 0;
  display: grid; gap: 1rem; max-width: 40rem;
}
/* block, not grid, so "(optional)" stays on the same line as its question */
.card label { display: block; font-size: .88rem; }
.card small { display: block; color: var(--dim); font-size: .8rem; margin-top: .25rem; }
input {
  font: inherit; color: inherit; background: transparent;
  display: block; width: 100%; margin-top: .3rem;
  border: 0; border-bottom: 1px solid var(--rule); padding: .4rem 0;
  border-radius: 0;
}
input:focus { outline: 0; border-bottom-color: var(--rust); }
button {
  font: inherit; font-weight: 700; color: var(--paper); background: var(--ink);
  border: 1px solid var(--ink); padding: .5rem 1.1rem; cursor: pointer;
  border-radius: 0; letter-spacing: .06em;
}
button:hover { background: var(--rust); border-color: var(--rust); }
form.inline { display: inline; }

.steps { max-width: 46rem; padding-left: 1.4rem; }
.steps li { margin: .5rem 0; }

/* ----------------------------------------------------------------- entry -- */
.statusbar {
  border: 1px solid var(--rule); border-left: 4px solid var(--rust);
  padding: .75rem 1rem; margin: 1.25rem 0; display: flex;
  flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
}
.statusbar.is-live { border-left-color: var(--ink); }
.checkresult {
  margin: -.5rem 0 1.25rem; padding: .5rem .75rem;
  border-left: 2px solid var(--rust); font-size: .88rem; color: var(--dim);
}

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem 1.5rem; margin: 1.5rem 0; }
.facts > div { border-top: 1px solid var(--rule); padding-top: .35rem; }
.facts dt { font-size: .75rem; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.facts .wide { grid-column: 1 / -1; }

.flavour { border-top: 1px dotted var(--rule); padding: 1.25rem 0; position: relative; }
.flavour .blurb { color: var(--dim); font-size: .85rem; margin: 0 0 .6rem; max-width: 44rem; }
.snippet {
  border: 1px solid var(--rule); padding: .75rem .9rem; margin: 0;
  overflow-x: auto; font-size: .82rem; line-height: 1.5;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}
.copy {
  position: absolute; right: 0; top: 1.25rem;
  background: transparent; color: var(--dim); border-color: var(--rule);
  font-size: .72rem; padding: .15rem .5rem; font-weight: 400;
}
.copy:hover { color: var(--paper); }
.swatches { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.swatches img { image-rendering: pixelated; border: 0; }

/* ------------------------------------------------------------------- log -- */
.log, .exploits { list-style: none; margin: 1.5rem 0; padding: 0; }
.log li {
  display: grid; grid-template-columns: 11ch 9ch 1fr; gap: .75rem;
  padding: .4rem 0; border-bottom: 1px dotted var(--rule); font-size: .85rem;
}
.log time { color: var(--dim); font-variant-numeric: tabular-nums; }
.kind { text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; color: var(--dim); }
.k-verified, .k-back { color: var(--rust); }
.k-discount, .k-lost { color: var(--rust); font-weight: 700; }
@media (max-width: 40rem) { .log li { grid-template-columns: 1fr; gap: .1rem; } }

.exploits li { padding: 1rem 0; border-bottom: 1px dotted var(--rule); }
.exploits .who { color: var(--dim); }
.exploits .detail { margin: .3rem 0 .2rem 3.15ch; font-size: .88rem; }
.exploits .patched .rank { color: var(--ghost); }

table.plain { border-collapse: collapse; margin: 1rem 0; font-size: .88rem; }
table.plain th, table.plain td { text-align: left; vertical-align: top; padding: .4rem .9rem .4rem 0; border-bottom: 1px dotted var(--rule); }
table.plain th { font-weight: 700; white-space: nowrap; }

/* ------------------------------------------------------------------ ring -- */
.ringfig { margin: 2rem 0; }
#ring { width: 100%; aspect-ratio: 1; max-width: 46rem; margin-inline: auto; touch-action: none; }
#ring svg { width: 100%; height: 100%; display: block; }
.ringfig figcaption { margin-top: .75rem; text-align: center; }

#ring .midbg { fill: var(--paper); }
/* traffic is rust everywhere — sparklines on the board, bars on the ring */
#ring .bar { stroke: var(--rust); }
.seat { cursor: pointer; }
.seat:focus { outline: none; }
.seat:focus .node, .seat:hover .node { fill: var(--rust); stroke: var(--rust); }
.seat:focus .bar, .seat:hover .bar { stroke: var(--rust); opacity: 1; }
.seat:focus .label, .seat:hover .label { opacity: 1; font-weight: 700; }
.seat.dim { opacity: .3; }
.seat, .chord { transition: opacity .12s linear; }
@media (prefers-reduced-motion: reduce) { .seat, .chord { transition: none; } }

/* ----------------------------------------------------------------- foot -- */
.foot {
  margin-top: 4rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
  font-size: .8rem; color: var(--dim);
}
.foot p { margin: .35rem 0; max-width: 46rem; }