/* Annogator — shared stylesheet.
   Direction: "the annotated page." The product draws boxes around claims and
   puts the citation in the margin, so the site does the same thing to itself.
   The box red is the exact colour boxes.py draws: rgb(0.86, 0.20, 0.18).

   Baseline target is "widely available" per the marketing-site rule: grid,
   flexbox and custom properties only. Nothing here needs a 2024 browser. */

:root {
  /* Paper stock, not white. This is a printed proof, not a screen. */
  --paper:      #FBF7EF;
  --paper-deep: #F3ECDE;
  --rule:       #E0D6C2;

  /* Ink. Never pure black — a warm near-black sits on paper without glare. */
  --ink:        #241C14;
  --ink-soft:   #5C4F41;
  --ink-faint:  #8C7E6C;

  /* From the mascot: amber hide, mint canvas, the chair's walnut. */
  --amber:      #E3A22B;
  --amber-deep: #B77A12;
  --mint:       #8FD4A8;
  --walnut:     #7A4A2B;

  /* The annotation itself. Same red the software draws. */
  --box:        #DB332E;

  /* Neon. Deliberately the one colour on the page that isn't from the mascot —
     a lit sign in a window, not part of the illustration. */
  --neon:       #FF2D95;
  --neon-soft:  #FF7ABF;

  --measure:  34rem;
  --gap:      clamp(1.25rem, 3vw, 2.5rem);

  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body:    "Public Sans", "Helvetica Neue", Helvetica, sans-serif;
  --mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
}

/* ---------- skip link + focus ---------- */

/* Links inherit the ink and take an amber underline. Browser-default blue
   fights every colour on the page and reads as unfinished. */
a {
  color: var(--ink);
  text-decoration-color: var(--amber);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--amber-deep); text-decoration-color: var(--amber-deep); }

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

:focus-visible {
  outline: 2px solid var(--box);
  outline-offset: 3px;
}

/* ---------- shell ---------- */

.wrap {
  width: min(72rem, 100% - 2.5rem);
  margin-inline: auto;
}

/* ---------- masthead ---------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem var(--gap);
  padding: 1.1rem 0;
}

.wordmark {
  display: flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
  line-height: 0;
}
.wordmark img {
  width: auto;
  height: 2.1rem;
  display: block;
  transition: transform .15s ease;
}
.wordmark:hover img { transform: translateX(2px); }

/* Available to assistive tech and search, invisible on screen. The page's
   heading is the BETA sign, which is not the document's actual title. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.15rem;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .04em;
  /* Letter-spacing widens the space character too, which pushed "AG DEMO"
     apart into two separate-looking words. Pull the word gap back in. */
  word-spacing: -.22em;
  text-transform: uppercase;
}
.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--amber); }
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--box);
}

/* ---------- the signature: an annotated line ---------- */

/* A phrase the page boxes and cites, exactly as the product would.
   The margin note sits out in the gutter on wide screens and folds
   underneath when there is no gutter to sit in. */
.annotated {
  position: relative;
  display: inline;
  padding: .08em .28em;
  box-shadow: inset 0 0 0 1.5px var(--box);
}
.annotated::after {
  content: attr(data-n);
  font-family: var(--mono);
  font-size: .6em;
  vertical-align: super;
  color: var(--box);
  margin-left: .3em;
  font-weight: 600;
}

.margin-note {
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1.5;
  color: var(--ink-faint);
  border-left: 2px solid var(--box);
  padding-left: .75rem;
  margin: 1.25rem 0 0;
  max-width: 22rem;
}
.margin-note b {
  color: var(--box);
  font-weight: 600;
}
.margin-note a { color: var(--ink-soft); }

/* ---------- hero ---------- */

.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem); }

.hero .wrap {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 56rem) {
  .hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

.eyebrow {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--box);
  margin: 0 0 1rem;
}

/* ---------- the BETA sign ---------- */

/* A lit sign in the window. The flicker is slow and shallow on purpose:
   anything faster than ~3Hz is a seizure risk, and a hard on/off blink is
   both dated and hard to read. This dims and re-strikes like real neon, and
   holds steady for anyone who asked for reduced motion. */
.beta-sign {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem);
  line-height: 1;
  letter-spacing: .16em;
  text-indent: .16em;          /* balances the trailing letter-space inside the frame */
  margin: 0 0 1.75rem;
  padding: .42em .5em .38em;
  color: var(--neon);
  /* The letters keep a pink outline at all times. The blink empties their
     fill, so they read as unlit glass tube rather than disappearing. */
  -webkit-text-stroke: 2px var(--neon);
  border: 3px solid var(--neon);
  border-radius: .55em;
  background: rgba(255, 45, 149, .04);
  /* Glow outward only. A pale halo tight to the glyph bleaches the letterform
     and the whole sign reads pastel instead of hot. */
  text-shadow:
    0 0 14px rgba(255, 45, 149, .55),
    0 0 34px rgba(255, 45, 149, .35);
  box-shadow:
    0 0 6px rgba(255, 45, 149, .35),
    0 0 22px rgba(255, 45, 149, .25),
    inset 0 0 12px rgba(255, 45, 149, .12);
  /* Only the text animates. The frame is a separate, always-lit tube, and
     animating opacity on the element dimmed it along with everything else. */
  animation: beta-blink 2s infinite;
}

/* One second lit, one second hollow, switching hard rather than fading —
   the duplicated stops either side of 50% are what prevent interpolation. */
@keyframes beta-blink {
  0%,   49.99% {
    color: var(--neon);
    text-shadow:
      0 0 14px rgba(255, 45, 149, .55),
      0 0 34px rgba(255, 45, 149, .35);
  }
  50%,  100%   {
    color: transparent;
    /* Without this the glow keeps painting a filled pink blur behind the
       hollow letters, which reads as a smudge rather than an unlit tube. */
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .beta-sign { animation: none; }
}

h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0 0 1.25rem;
}

.lede {
  font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0 0 1rem;
}

.gator {
  width: 100%;
  height: auto;
  display: block;
  /* Sits on the paper rather than floating above it. */
  filter: drop-shadow(0 18px 24px rgba(122, 74, 43, .18));
}

/* ---------- tiers: a reference block, not a card row ---------- */

.tiers { padding: clamp(1rem, 3vw, 2rem) 0 clamp(3rem, 7vw, 5rem); }

/* Three doors side by side, each with its own explanation underneath.
   No rules, no numbering — the buttons carry the hierarchy. */
.versions {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 46rem) {
  .versions { grid-template-columns: repeat(3, 1fr); }
}

.version p {
  margin: 1rem 0 0;
  color: var(--ink-soft);
}

/* Only the layout differs from an ordinary button — full width, a little
   larger. The pink comes from `.btn`. */
.version .btn {
  display: block;
  width: 100%;
  text-align: center;
  font-size: .92rem;
  padding: 1.05rem 1rem;
}

/* ---------- buttons ---------- */

/* Lit like the BETA sign — pink on pink, rounded, glowing. One button style
   across the whole site: the sign sets the register and everything clickable
   follows it. */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .8rem 1.4rem;
  border-radius: .6em;
  color: var(--neon);
  border: 2.5px solid var(--neon);
  background: rgba(255, 45, 149, .04);
  text-shadow: 0 0 12px rgba(255, 45, 149, .45);
  box-shadow:
    0 0 5px rgba(255, 45, 149, .3),
    inset 0 0 10px rgba(255, 45, 149, .1);
  transition: background .15s ease, color .15s ease, transform .15s ease,
              box-shadow .15s ease;
}
.btn:hover {
  color: var(--paper);
  background: var(--neon);
  text-shadow: none;
  box-shadow: 0 0 18px rgba(255, 45, 149, .5);
  transform: translateY(-1px);
}

/* Looks identical to its neighbours — it just doesn't go anywhere yet.
   aria-disabled still tells assistive tech it isn't actionable, and
   pointer-events keeps it from lighting up under the cursor. */
.btn[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.75rem 0 0;
}

/* ---------- interior pages ---------- */

.page { padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem); }

.page-head {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
  align-items: center;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
@media (min-width: 52rem) {
  .page-head { grid-template-columns: minmax(0, 1fr) 15rem; }
}
.page-head .gator { max-width: 15rem; margin-inline: auto; }

/* Interior headings are set in the body face, not the display serif — they sit
   directly above body copy and the switch read as two different pages. */
.page h1 {
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: -.01em;
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem);
  line-height: 1.15;
  margin-bottom: .5rem;
}

.prose { max-width: var(--measure); }
.prose h2 {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  line-height: 1.25;
  margin: 2.25rem 0 .6rem;
}
.prose h3 {
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 700;
  margin: 1.75rem 0 .35rem;
}
.prose p { margin: 0 0 1rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.prose li { margin: 0 0 .5rem; }
/* `:not(.btn)` matters: `.prose a` outranks `.btn` on specificity, and every
   interior page puts its button inside `.prose` — without this the buttons
   there render in ink while the home page's render pink. */
.prose a:not(.btn) { color: var(--ink); text-decoration-color: var(--amber); text-underline-offset: 3px; }
.prose a:not(.btn):hover { color: var(--amber-deep); }

/* Numbered instruction list, set like a protocol rather than a bullet list. */
.steps { list-style: none; margin: 0 0 1.5rem; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .75rem;
  padding: .55rem 0;
  margin: 0;
}
.steps li::before {
  content: counter(step);
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--box);
  padding-top: .15rem;
}

/* A caution the audience actually reads, not a boilerplate band. */
.caution {
  border: 1.5px solid var(--box);
  padding: 1rem 1.15rem;
  margin: 1.75rem 0;
  max-width: var(--measure);
  background: rgba(219, 51, 50, .035);
}
.caution p { margin: 0; }
.caution p + p { margin-top: .6rem; }
.caution strong { color: var(--box); }

/* Security claims: a checklist reads as verifiable, prose reads as marketing. */
.facts { list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: 44rem; }
.facts li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .6rem;
  padding: .55rem 0;
  margin: 0;
}
.facts li::before {
  content: "\2713";
  color: var(--mint);
  font-weight: 700;
  filter: brightness(.72);
}

.qa { margin: 0 0 1.75rem; max-width: 44rem; }
.qa dt {
  font-weight: 700;
  margin: 1.5rem 0 .4rem;
}
.qa dd { margin: 0 0 .5rem; color: var(--ink-soft); }

/* ---------- demo tool ---------- */

.tool {
  border: 1px solid var(--ink);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin: 2rem 0 0;
  max-width: 44rem;
  background: var(--paper-deep);
}
.tool h2 { margin-top: 0; }

input[type="file"] {
  font-family: var(--mono);
  font-size: .82rem;
  width: 100%;
  padding: .6rem 0;
}

/* The Annotate button. Same lit style as every other button on the site. */
button {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .8rem 1.4rem;
  border-radius: .6em;
  color: var(--neon);
  border: 2.5px solid var(--neon);
  background: rgba(255, 45, 149, .04);
  text-shadow: 0 0 12px rgba(255, 45, 149, .45);
  box-shadow:
    0 0 5px rgba(255, 45, 149, .3),
    inset 0 0 10px rgba(255, 45, 149, .1);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
button:hover {
  color: var(--paper);
  background: var(--neon);
  text-shadow: none;
  box-shadow: 0 0 18px rgba(255, 45, 149, .5);
}
/* Mid-annotation: dimmed and unlit, so it reads as busy rather than clickable. */
button:disabled {
  color: var(--ink-faint);
  border-color: var(--rule);
  background: transparent;
  text-shadow: none;
  box-shadow: none;
  cursor: wait;
}

.result { margin-top: 1.5rem; }
.result-count {
  font-family: var(--display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1;
  color: var(--box);
}

.sourced, .refused {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.sourced li, .refused li {
  padding: .6rem 0 .6rem .9rem;
  margin-bottom: .4rem;
}
.sourced li { border-left: 2px solid var(--mint); }
.refused li { border-left: 2px solid var(--box); }

.cite {
  display: block;
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--ink-faint);
  margin-top: .3rem;
}
.err { color: var(--box); }

/* ---------- footer ---------- */

.colophon {
  border-top: 1px solid var(--rule);
  margin-top: auto;
  padding: 1.5rem 0 2.5rem;
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--ink-faint);
}
.colophon .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  justify-content: space-between;
}
.colophon a { color: var(--ink-faint); }
.colophon a:hover { color: var(--ink); }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}