/* Self-hosted font: keeps the CSP at 'self' (no Google Fonts request) */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-display: swap; /* show fallback text at once, swap in the font when it loads */
}

body {
  margin: 0;
  padding: 16px;
  background: #1a1b26;
  color: #c0caf5;
  /* fallback "monospace" keeps the art aligned when web fonts are blocked (Tor Safer level) */
  font-family: "JetBrains Mono", monospace;
}

a {
  color: #7aa2f7; /* the default purple is hard to read on the dark background */
}

/* Generate: buttons don't inherit the page font, so it's set here explicitly */
button {
  font: inherit;               /* same family and size as the page, not the browser's default */
  color: #7aa2f7;              /* the link and wordmark colour */
  background: #24283b;         /* a step lighter than the page, so it reads as a control */
  border: 1px solid #7aa2f7;
  border-radius: 4px;
  padding: 2px 12px;
  cursor: pointer;             /* the hand cursor, like a link */
}

button:hover {
  background: #2f354f;         /* a little lighter on hover */
}

button:focus-visible {
  outline: 2px solid #7dcfff;  /* keyboard focus ring; focus-visible skips it on mouse clicks */
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.5;                /* greyed out while the signals are being collected */
  cursor: wait;
}

/* one centred column: every section shares its left and right edges */
main {
  max-width: 1200px;     /* wide enough for the art plus a ~70-character report column */
  margin: 0 auto;        /* auto side margins centre the column in the window */
}

/* page header: the wordmark, with the treadmill to its right */
#masthead {
  display: flex;
  flex-wrap: wrap;       /* the treadmill drops below the wordmark when there's no room */
  align-items: center;
  gap: 16px 40px;
  margin-bottom: 16px;
}

#logo,
#treadmill {
  margin: 0;
  max-width: 100%;
  overflow: hidden;      /* both are sized to fit, so neither should ever scroll */
  font-family: inherit;
  font-size: 14px;
  font-variant-ligatures: none; /* JetBrains Mono would join == and |= into single symbols */
  line-height: 1.2;
  white-space: pre;
}

#logo {
  flex: none;            /* keeps its full width; the treadmill takes what's left */
  color: #7aa2f7;
  /* 55 = the wordmark's width in font sizes (91 cells at 0.6 each), so it always fits a phone */
  font-size: min(14px, calc((100vw - 32px) / 55));
}

#treadmill {
  flex: 1 1 300px;       /* fills the header out to the right edge of the page */
  min-width: 0;          /* lets it shrink with the window */
  color: #7aa2f7;        /* the same colour as the wordmark */
  font-size: 7px;        /* shorter than the wordmark, with the feet still readable */
}

/* fastfetch layout: art on the left, text on the right */
#layout {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

#art {
  flex: none;            /* keeps its full width beside the report */
  margin: 0;
  font-family: inherit;  /* <pre> defaults to the system monospace, not the body's font */
  /* 16px, or smaller on a narrow phone so the 30em-wide box fits the screen (like #logo) */
  font-size: min(16px, calc((100vw - 32px) / 30));
  font-variant-ligatures: none; /* JetBrains Mono would join |= and /= into single symbols */
  white-space: pre;      /* the art must never wrap, or the flower falls apart */
  overflow-x: auto;      /* safety net: a wider fallback font scrolls the art instead of the page */
  overflow-y: hidden;    /* without this, overflow-x: auto also adds a vertical scrollbar */
  line-height: 1.2;
  /* the pixel view's box in em: 480 x 640 at 16px, and it shrinks with the font on a phone,
     just as the canvas does, so nothing on the page moves on a view switch.
     The art itself is 28.8em x 38.4em (48 cells x 0.6em, 32 lines x 1.2em) */
  width: 30em;
  height: 40em;
  max-width: 100%;
}

/* pixel view: the canvas is only 48 x 64, so CSS blows it up 10 times.
   No display rule here: one would override the hidden attribute the toggle uses. */
#pixels {
  flex: none;                 /* keeps its full width beside the report, like #art */
  width: 480px;               /* 10 x 48; the height follows the canvas's shape (640px) */
  height: auto;               /* keeps the 3:4 shape when max-width shrinks it */
  max-width: 100%;            /* a narrow phone shrinks the flower instead of scrolling */
  image-rendering: pixelated; /* enlarge by repeating pixels, not blurring between them */
}

#report {
  flex: 1;               /* fills the rest of the row, so its right edge is the column's */
  min-width: 0;          /* lets long values wrap instead of widening the page */
  overflow-wrap: anywhere;
}

#summary {
  margin-top: 24px;      /* no max-width: it spans the column, so its right edge matches the report's */
}

/* privacy and 404 pages */
.page {
  max-width: 90ch;
}

.page h1 {
  margin: 24px 0 8px;
  color: #7aa2f7;
}

.page h2 {
  margin-top: 24px;
}

h2 {
  margin: 0 0 8px;
  color: #7aa2f7;
}

h3 {
  margin: 16px 0 4px;
  font-size: 1em;
  color: #e0af68;
}

.line {
  margin: 2px 0;
}

.label {
  color: #7dcfff;
}

.tag-hidden,
.tag-spoofed {
  color: #e0af68;
}

.tag-pending {
  color: #828bb8;        /* dim: a placeholder, not a finding; 5.16:1 on the page (WCAG AA needs 4.5) */
}

.clue,
.note {
  color: #a9b1d6;
}

.previewed {
  opacity: 0.4;          /* what a previewed fix would hide */
  text-decoration: line-through;
}

.closing {
  margin: 16px 0 8px;
}

/* below ~900px, the art stacks above the text: the art alone is about 460px wide */
@media (max-width: 900px) {
  #layout {
    flex-direction: column;
  }
}