/* ══════════════════════════════════════════════════════════════════════════
   Panoptic Bio company page - legal document pages

   Loaded by terms.html, disclaimer.html and privacy.html, all three generated
   by assemble-legal.py. Nothing else in the deck links this file, and every
   selector is under .doc, so it cannot reach the other twenty three pages.

   THIS FILE IS THE WHOLE OF THE WORK DONE TO THE LEGAL TEXT. The words are
   extracted verbatim from the shipped documents and a build check compares
   the rendered text against the source on every run. Markup and styling are
   what a design deck is allowed to change, so all of the change is here.

   WHY THE DOCUMENT HAS ITS OWN TYPE SCALE, AND WHY THAT IS NOT A SECOND
   DESIGN SYSTEM

   base.css sets h2 at clamp(1.8rem, 3vw, 2.5rem). That is a MARKETING SECTION
   heading: there are six of them on the company page and each one opens a
   screen. The Terms of Use has thirteen h2s and thirty one h3s. At 2.5rem the
   line "1. Accounts" would be the same size as "Trial Terminal." on the home
   page, and a reader scrolling the document would meet a 40px headline every
   two paragraphs. The tokens, the face, the weights, the colour roles, the
   radius rule and the measure are all base.css's and are untouched; only the
   sizes step down, and they step down inside one class on two pages.

   NO PILLS. Nothing here draws a border or a fill around a short word. The
   one bordered object is the arbitration notice, which is four sentences of
   capitalised text that the document itself calls out for prominence.

   Elevation: borders only, no box-shadow in this file at all, so the "shadow
   or border, never both" rule cannot be broken by accident. No gradient, no
   glow, no `transition: all`, no serif, no monospace, no pure black.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── The column ────────────────────────────────────────────────────────────
   A legal page is read, not scanned, so the measure is the whole layout
   decision. base.css's .shell is 1180px because the company page has product
   windows in it, and 1180px of body copy is unreadable.

   THE MEASURE IS NOT SET IN ch, WHICH IS THE OPPOSITE OF THE OBVIOUS CHOICE,
   BECAUSE ch LIES ABOUT THIS FACE. `ch` is the advance width
   of the digit zero, and Figtree's zero is wide relative to its lowercase.
   This file first shipped at 68ch, on the assumption that that was about 68
   characters. MEASURED in Chromium 149 by walking the text nodes of the
   Terms with a Range and counting characters per rendered line, it was 99
   characters at the median, 113 at the longest line: half as long again as
   the number in the stylesheet said, and comfortably outside the 45 to 75
   band that the recommendation is about.

   560px measures in the mid sixties at the median on this face at 18px. The
   number to trust is the one counted off the rendered page, and the comment
   records how it was counted so the next person can repeat it rather than
   believe it.

   AND THE COUNTER ITSELF HAD A BUG IN IT, WHICH IS WORTH KEEPING HERE
   BECAUSE IT INFLATED EVERY NUMBER ABOVE BY ABOUT A FIFTH. Walking the text
   nodes and counting the characters that return a rect with height also
   counts THE SOURCE INDENTATION. These files are pretty printed, so a
   paragraph carries fourteen leading spaces per source line; they collapse
   visually, but each one still returns a rect with a height and a width of
   zero, and each was landing on whichever rendered line it collapsed into.
   The fix is one clause in the counter, `if (rect.width === 0) continue`.

   Counted with that clause, in Chromium 149, at 1440 and at 768, which agree
   because the column is capped:

       terms.html        median 62   p90 69   max 74   over 476 lines
       disclaimer.html   median 64   p90 72   max 82   over  67 lines
       privacy.html      median 65   p90 70   max 78   over 213 lines

   At 390 the medians are 39, 41 and 41. At 320 they are 31, 33 and 32. Every
   one of them is inside the 45 to 75 band at desktop widths and the column
   did not move: only the count did. Same lesson as the ch unit and the rem
   unit above, arriving a third time from a third direction: a measurement
   nobody has sanity checked against a hand count is a number, not a fact.

   THE DISCLAIMER'S max OF 82 IS NOT THE BODY COPY AND IS WORTH NAMING. That
   page grew a context section around its quotation, so it now has two blocks
   of 0.9rem small print in it, .verbatim-note and .note, and 14.4px in a
   560px column runs to 82 characters. MEASURED per element: the 18px body
   copy tops out at 73 and the 20.7px statement at 58, both inside the band.
   The privacy page's .answers line reaches 78 for the same reason and was
   accepted for it. Capping the small print separately would put a SECOND
   measure in this file, which the note below argues against by name, so the
   number is recorded rather than designed around.

   AND THE UNIT IS em, NOT rem, WHICH IS THE SECOND HALF OF THE SAME LESSON.
   The column first shipped at 35rem. `rem` is the ROOT font size, which is
   the reader's browser preference, and base.css sets `body { font-size:
   18px }`, an absolute length that does not move with it. So the two ends
   were tied to different things. MEASURED in Chromium 149, same page, root
   font size raised from 16px to 24px the way a reader with poor vision sets
   it: the column went 560px to 840px while the text stayed at 18px, and the
   Terms went from a 65 character median line to 93, p90 115, longest 129. The
   disclaimer went to a 109 character median. Raising the type size made the
   document harder to read, which is the exact opposite of what the reader
   asked for.

   `em` on max-width resolves against this element's OWN font size, which is
   the 18px the text is actually set in, so the measure is now tied to the
   thing it is a measure OF. 31.111em x 18px = 560px, so nothing moves at the
   default and the cliff is gone. If body's 18px is ever released to the
   reader's preference, this column follows it for free.

   The px result should be checked, not assumed, after any change to the type
   scale: the whole point of the paragraph above is that a unit can look like
   it means one thing and mean another.

   ONE MEASURE, STATED ONCE. base.css caps p at 66ch and this file used to cap
   li at 63ch, both now far wider than the column, so they were doing nothing
   while looking as though they were doing the work. They are released here so
   that the container is the only thing setting the measure and there is one
   number to change.

   overflow-wrap is not cosmetic. The document contains bare URLs, an email
   address and "www.panoptic.bio", and at 320px an unbroken token is the thing
   that puts a horizontal scrollbar on the page. */
.doc {
  max-width: 31.111em; /* 560px at the 18px this text is set in. Not rem. */
  margin: 0 auto;
  overflow-wrap: break-word;
}

.doc p,
.doc li,
.doc .arbitration-notice {
  max-width: none;
}

/* ── Headings ──────────────────────────────────────────────────────────────
   Three levels, and the gap between them is deliberately wide, because in a
   numbered document the level IS the structure. h1 is the document, h2 is a
   numbered section, h3 is a clause.

   Every size is stated rather than inherited from the tag. base.css is shared
   with twenty three other pages and a heading that leaves a property to its
   tag is a silent restyle waiting for somebody to change the tag, which this
   deck has already been bitten by once. */

/* THE HEADER IS STICKY AT 75px AND THESE ARE THE ONLY PAGES ANYONE JUMPS
   AROUND INSIDE. MEASURED in Chromium 149: scrolling "Supplemental: Purchase
   & Subscription Terms" into view put it fully behind the header, and browser
   find, a #fragment in a URL and a screen reader's heading jump all scroll
   the same way. 91px is the header plus a 16px breath. Nothing else on these
   pages needs it, so it is scoped to the headings rather than set on html,
   where it would reach the other twenty three deck pages through base.css. */
.doc :is(h1, h2, h3) {
  scroll-margin-top: 91px;
}
.doc h1 {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}

/* The stamp under the title. It is the document's own version line, not a
   date this deck invented: LEGAL-PAGES.md section 6 rule 5 forbids putting an
   effective date on anything, and there is none here that the source did not
   already carry. */
.doc .updated {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* A hairline above each numbered section, instead of a bigger heading. It
   costs one pixel and buys the thing size was buying: you can see where a
   section begins while scrolling past at speed. */
.doc h2 {
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 3.4rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  text-wrap: balance;
}

.doc h2 + p,
.doc h2 + ul,
.doc h2 + ol,
.doc h2 + .arbitration-notice {
  margin-top: 0.9rem;
}

.doc h3 {
  font-size: 1.05rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 2rem 0 0.5rem;
}

/* ── Body ──────────────────────────────────────────────────────────────────
   base.css already sets p to margin 0, and the measure is the column's, so
   only the rhythm between blocks is set here. */
.doc p {
  margin: 1rem 0 0;
}

.doc ul,
.doc ol {
  margin: 1rem 0 0;
  padding-left: 1.6rem;
}

.doc li {
  margin: 0 0 0.5rem;
}

.doc li::marker {
  color: var(--muted);
}

.doc strong {
  font-weight: 600;
}

/* ── The arbitration notice ────────────────────────────────────────────────
   The source renders this amber on amber, which is a second accent this deck
   does not have and which measures poorly under capitalised text. The
   PROMINENCE is not decoration and is not this deck's to reduce: the document
   sets four sentences in capitals and tells the reader twice to read section
   10.2 carefully. So the emphasis is kept and re-carried by the deck's own
   material: the second surface, the deck's one border colour, and a solid
   3px rule in the brand blue down the leading edge.

   Colour measured: --ink #0d1720 on --tint #f4f7fa is 16.6:1. The amber it
   replaces was #92400e on #fef3c7, which is 7.0:1. */
.doc .arbitration-notice {
  margin: 1.75rem 0 0;
  padding: 20px 22px;
  background: var(--tint);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-surface);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 500;
}

/* ── The signed statement on the disclaimer page, and the site's context ───
   The client: "data and model disclaimer is still empty... well not empty but
   barely anything". The page was 354 characters, the signed paragraph and
   nothing else. THE SIGNED PARAGRAPH DID NOT GROW; the page grew around it,
   and everything in this block exists to make that difference visible to a
   reader rather than only true in the build log.

   THREE THINGS TELL THE TWO APART, and only the third is styling: the
   quotation is alone inside one container and the build compares the two
   texts; the context never says "we" while the statement says "our own
   models", so the voices differ; and the treatment below.

   WHY A LEFT RULE AND NOT THE NOTICE TREATMENT. This file already has one
   bordered object, tint plus hairline plus a 3px brand edge, worn by the
   arbitration notice and by the privacy page's status block. Those two are
   the same KIND of thing: a notice ABOUT a document. The signed statement is
   not a notice about anything, it is the document, and dressing it as one
   would say the wrong thing carefully. So it takes the lighter half of the
   same treatment, the 3px brand edge alone, on the page ground: enough to
   read as a marked block, not enough to read as an aside. No fill, no
   hairline box, so "shadow or border, never both" is untouched and nothing
   here is a pill.

   PROMINENCE. DESIGN.md section 8 says restyle it and give it more
   prominence. The statement is the only place on these three pages where body
   copy steps up, and it steps up in em RATHER THAN rem, for the reason the
   column note above spends four paragraphs on: base.css sets body to an
   absolute 18px, so 1.15rem is 1.15 x the READER'S root size, which is 16px
   by default and made this 18.4px. MEASURED in Chromium 149, that is a step
   of 0.4px, which is not prominence, it is a rounding error wearing a
   stylesheet. 1.15em resolves against the 18px the text is actually set in
   and gives 20.7px, and it tracks the body if that 18px is ever released to
   the reader. Same lesson as the ch unit and the rem unit above, arriving a
   fourth time. Measured in the 560px column at 20.7px the statement counts 52
   characters at the median, inside the 45 to 75 band.

   Colour, computed: --ink #0d1720 on --page #ffffff is 18.1:1 for the
   statement, and --muted #4a5763 on white is 7.4:1 for the kicker and the
   line under it. */
.doc .doc-kicker {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
}

.doc .verbatim {
  margin: 0;
}

.doc .verbatim > p {
  margin: 1.5rem 0 0;
  padding: 2px 0 2px 22px;
  border-left: 3px solid var(--brand);
  color: var(--ink);
  font-size: 1.15em; /* 20.7px at the 18px this text is set in. Not rem. */
  line-height: 1.6;
}

/* The one sentence on the page that says where the document stops. Muted and
   small on purpose: it is a caption on the block above it, not a second
   statement competing with it. */
.doc .verbatim-note {
  margin: 1rem 0 0;
  padding-left: 22px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* A cited document title. Set upright: no italic appears anywhere else in
   this deck, and the link is already underlined and in --brand, so the title
   is marked twice over without introducing a type style for one element. */
.doc cite {
  font-style: normal;
}

/* ── The status block on the privacy page ───────────────────────────
   The one object on that page a reader has to see before they read anything
   else, because without it the document reads as a settled policy and it is
   not one. It sits directly under the h1 and says so in its first sentence.

   WHY THIS IS NOT THE THING THE CLIENT BANNED. The standing instruction is
   against "Placeholder" and "Sample data" markers on the site, and neither
   word is here or anywhere near here. That instruction is about MARKETING
   copy, where a chip announcing that a section is not real is an admission
   pretending to be a design. A legal document that is not in force carries a
   status line as a matter of course, and leaving it off would be the
   dishonest choice rather than the tidy one. No marker was added to any
   marketing page: nothing outside these two stylesheets moved.

   WHY IT LOOKS LIKE THE ARBITRATION NOTICE. Because it is the same kind of
   object, and this file has one border treatment rather than two. The "NO
   PILLS" note at the head of the file bans a border or a fill around a SHORT
   WORD, which is a chip; a five paragraph block is not that, and inventing a
   second notice style so the two could be told apart would put a shape on the
   page that means nothing. Same tint, same hairline, same 3px brand edge.

   Colour, computed: --ink #0d1720 on --tint #f4f7fa is 16.6:1, the same pair
   the arbitration notice measures at. */
.doc .doc-status {
  margin: 1.75rem 0 0;
  padding: 20px 22px;
  background: var(--tint);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-surface);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.65;
}

.doc .doc-status p:first-child {
  margin-top: 0;
}

.doc .doc-status strong {
  font-weight: 600;
}

/* ── Who has to answer an open question ─────────────────────────────────
   The line that closes every unanswered section: who supplies the fact and
   who reviews it. Twelve of them in a row is the thing that stops the second
   half of that page reading as a policy, so it is set to be READ rather than
   to be skipped: the label word takes the page's ink and the answer stays
   muted, which is the reverse of the usual pairing and is deliberate. The
   label is the part a person completing the document is scanning for.

   No border, no fill, no chip, no colour coding, and no second hue: DESIGN.md
   section 2 locks the page to one accent and none of it is spent here.

   Colour: --muted #4a5763 on --page #ffffff is 7.4:1, and the label in --ink
   is 18.1:1. */
.doc .answers {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.doc .answers-by {
  color: var(--ink);
  font-weight: 600;
}

/* ── Rules and the closing note ────────────────────────────────────────────*/
.doc .section-divider {
  height: 1px;
  background: var(--line-strong);
  border: 0;
  margin: 3.5rem 0 0;
}

.doc .note {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

/* ── Links inside the document ─────────────────────────────────────────────
   Underlined, always. base.css leaves body links underlined by default and
   nothing here removes it: in a legal document the reader has to be able to
   tell a cross reference from an ordinary phrase, and colour alone is not a
   cue that survives a greyscale print or a colour vision deficiency. --brand
   measures 10.6:1 on white. */
.doc a {
  color: var(--link);
}

.doc a:hover {
  color: var(--link-strong);
}

/* ── Narrow ────────────────────────────────────────────────────────────────
   Only the block spacing tightens. The measure already collapses on its own,
   because 68ch is wider than a phone and the .shell padding takes over. */
@media (max-width: 640px) {
  .doc h2 {
    margin-top: 2.6rem;
    padding-top: 1.2rem;
  }

  .doc .arbitration-notice {
    padding: 18px;
  }
}