/* The BackLinx subdomain's own stylesheet.
 *
 * His ruling, 13 Sep 2026: the three BackLinx pages move to
 * backlinx.hybridizingdragonfruit.com, which serves those three pages and
 * nothing else — "this will help reduce brand dilution between the two distinct
 * projects". So this sheet shares nothing with src/site.css: no nursery colours,
 * no nursery fonts, no nursery header or footer. It is small on purpose.
 *
 * Two of these three pages are legal text a Google reviewer has read, and he
 * reads his own screens with macOS Zoom, so the rules that matter most here are
 * the ones that survive magnification: everything in relative units, one column
 * under 700px, nothing with a fixed height, and a wide table that scrolls inside
 * its own box instead of making the page scroll sideways.
 */

/* The two colours are read off the mark itself — the cyan and the magenta of
 * the two interlocking links — so the page and the icon are the same brand
 * rather than merely next to each other. They are used for the hairline under
 * the header and for the focus ring, never for body text: at their own
 * saturation neither carries enough contrast to read a paragraph in.
 */
:root {
  --brand-cyan: #22c3dd;
  --brand-magenta: #e35fd0;

  /* His instruction, 13 Sep 2026: "dark mode implememntation matching brand
   * colors", and then, seeing it still white on his own Mac: "the webpage still
   * has a white background, i told you to fioxc that!"
   *
   * It was written as prefers-color-scheme, which means a Mac set to light shows
   * a white page — so on HIS screen nothing had changed. That was a wrong
   * reading of what he asked for. This page is dark, full stop: the ground is
   * the mark's own field, the near-black the icon sits on, whatever the machine
   * looking at it prefers.
   *
   * The saturated brand cyan is about 2.6:1 on that ground — fine for a
   * hairline, nowhere near enough to read — so link TEXT uses the lightened
   * cyan below, and hover the lightened magenta. Checked, not asserted:
   * build/backlinx-site-a11y.test.mjs runs axe over every page in both schemes,
   * so a brand colour that cannot be read fails the build.
   */
  color-scheme: dark;
  --ink: #e9eef3;          /* 15.2:1 on the ground below */
  --ink-soft: #aab6c2;     /*  8.4:1 */
  --line: #262f3a;
  --paper: #10141a;        /* the mark's own field */
  --panel: #171d26;
  --code: #1b222c;
  --link: #7fe3f2;         /* the mark's cyan, lightened: 11.3:1 */
  --link-hit: #f2a9e4;     /* the mark's magenta, lightened: 8.9:1 */
  --focus: #7fe3f2;
}



* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Skip link: off screen until it has focus, then plainly visible. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  z-index: 10;
}
.skip:focus { left: 0; }

a { color: var(--link); }
a:hover { color: var(--link-hit); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ── the mark ─────────────────────────────────────────────────────────────
 * The image the conversion from Squarespace lost. It is decorative here because
 * the word BackLinx sits beside it in text, so a screen reader is not told the
 * same thing twice.
 */
.bl-head {
  border-bottom: 1px solid var(--line);
  padding: 1.25rem 1.25rem 1rem;
}
.bl-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink);
}
.bl-brand img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.85rem;
  display: block;
}
.bl-word {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ── the words ───────────────────────────────────────────────────────────── */
main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 3rem;
}

h1 {
  font-size: 1.9rem;
  line-height: 1.25;
  margin: 0 0 1rem;
}
h2 {
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 2rem 0 0.5rem;
}
p, li { margin: 0 0 0.9rem; }
ul, ol { padding-left: 1.4rem; }
li { margin-bottom: 0.5rem; }
strong { font-weight: 700; }

/* The privacy policy quotes Google's OAuth scopes, which are long strings with
 * no spaces in them. Left alone, one of them stretches the page to 765px at a
 * 320px viewport — the whole page then scrolls sideways, which is precisely
 * what breaks under macOS Zoom. Measured, not guessed:
 * build/backlinx-site-a11y.test.mjs caught this and fails again if it returns.
 */
p, li, td, th, h1, h2 { overflow-wrap: break-word; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--code);
  padding: 0.1em 0.3em;
  border-radius: 0.25em;
  overflow-wrap: anywhere;
}

/* A wide table scrolls inside its own box. Making the whole page scroll
 * sideways is what breaks at 400% zoom. tabindex on the box is what lets a
 * keyboard reach the scroll; the role and label are what tell a screen reader
 * what it is. */
.tablewrap {
  overflow-x: auto;
  margin: 0 0 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
}
table { border-collapse: collapse; width: 100%; min-width: 30rem; }
th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
th { background: var(--panel); font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }

/* ── the three pages, and nothing else ───────────────────────────────────── */
.bl-foot {
  border-top: 1px solid var(--line);
  padding: 1.25rem;
  color: var(--ink-soft);
}
.bl-foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.bl-foot li { margin: 0; }

@media (max-width: 30rem) {
  .bl-word { font-size: 1.35rem; }
  .bl-brand img { width: 2.75rem; height: 2.75rem; }
  h1 { font-size: 1.55rem; }
}