/* ============================================================================
   Expanding Ranks, long-form document component
   ----------------------------------------------------------------------------
   Load FIFTH, after 04-components.css. Depends on 01 and 02 for every token
   it reads and reuses .er-header, .er-nav, .er-note, .er-badge, .er-table,
   .er-t-* and .er-container* from 04 rather than redefining them.

   WHAT THIS FILE IS FOR

   The four compliance pages (privacy, terms, security, support) are the one
   screen type the rest of the system never had to solve: a single long
   document that a vendor reviewer skims under time pressure, looking for one
   named thing ("Google", "Zoom"), rather than a working screen a recruiter
   operates all day. That reader needs three things the component library did
   not yet have: a sticky in-page table of contents, a deep-linkable heading a
   reviewer can land on directly, and a way to mark a block of text as not-yet-
   final without pretending it is either a warning or the one signal on the
   screen.

   Same rules as 04-components.css, because this is the same system, not a
   second one:

     - No raw hex. Every colour comes from a role in 02-system-tokens.css.
     - No raw ramp token, no spacing value outside --space-*, no radius
       outside the four declared, no z-index integer, no duration or easing
       literal, no breakpoint outside the five in 02-system-tokens.css
       section 4.
     - No em dash and no en dash, including in these comments.

   The placeholder block is deliberately NOT built from --color-signal or
   --color-signal-surface. The tangerine rule reserves that family for the
   one thing on a screen that needs a human, and a document under active
   drafting can carry a dozen placeholders at once. Painting all of them
   tangerine spends the one channel the whole system protects. Placeholders
   use the info tint instead, same as .er-note's default, with a label rather
   than a colour doing the work of saying "this is not final text."
   ========================================================================== */

/* ============================================================================
   1. PAGE CHROME

   The header and footer bookend a document exactly as .er-header already
   renders it elsewhere in the system: white surface, sticky, a bottom
   hairline. This file adds two things that component did not have to solve.

   THE HEADER MODIFIER, and why it is a modifier rather than a change to
   .er-header itself.

   Measured on all four of these pages at 390px on September 26, 2026: the
   page scrolled sideways by 128px. The cause is .er-nav, whose four links
   measure 341px against a 350px content box once the brand lockup is already
   occupying 137px of the same row. The application shell never hits this
   because it carries .er-nav--collapse, which 04-components.css hides below
   1024px. These pages cannot hide their nav, because on a document set it is
   the only way to get from one document to the next.

   So the header wraps to two rows below 768px instead: brand on the first,
   the four links on the second, every link at its full 40px target. That is
   scoped to .er-header--doc and nothing else in the system carries that
   class, so the application shell's single-row header is untouched.

   And the footer, which the rest of the system has not needed yet.
   ========================================================================== */

@media (max-width: 768px) {
  .er-header--doc { flex-wrap: wrap; row-gap: var(--space-2); }
  .er-header--doc .er-nav { flex-wrap: wrap; width: 100%; }
}

/* THE BRAND LOCKUP: mark on the LEFT, wordmark on the RIGHT, in that order.

   THIS ORDER IS THE POINT, AND IT WAS BROKEN ONCE ALREADY. These pages used
   to draw the logo out of DOM: a .er-mark of seven .er-dot spans plus
   .er-logotype setting "Expanding" and "Ranks" as live Archivo text. Mark
   left, words right. That arrangement was RIGHT and is what is restored here.

   What was wrong was only the artwork. The designer's mark is TWENTY-TWO dots
   in four rows of 4, 5, 6 and 7, counted as twenty-two <circle> elements in
   all six lockups under brand/logo/SVG. The header drew seven of them in two
   rows, so the one idea the mark exists to carry, ranks expanding as they
   descend, could not be read at all. And site/index.html:64 already carried
   the rule the header was ignoring: "The wordmark is outlined vector from
   brand/logo/SVG, not type set in CSS ... Do not replace these paths with
   live text."

   The fix for that was to swap in site/logo-expanding-ranks.svg, the
   HORIZONTAL lockup. Accurate, and wrong anyway, for two reasons measured at
   1440px on September 26, 2026 and visible in one glance at a screenshot:

   1. The horizontal lockup runs WORDMARK LEFT, DOTS RIGHT. That is the
      reverse of this header's established order, so restoring accuracy
      silently flipped the lockup end for end.
   2. In that lockup the dots occupy 48% of the width. Fitted to a 65px
      header the dot cluster came out 67px wide against a wordmark whose caps
      were about 7px tall, so a mark that had been a quiet 5px texture became
      the loudest thing on the page. Accurate proportions, wrong emphasis.

   So: the two halves are separate files, composed in the old order at the old
   optical weight.

   - logo-mark.svg is the 22 circles of RanksLogo-Sq-Logo-Only-WhtBG.svg on a
     tight viewBox, nothing else. At --space-5 the dots compute to 5.0px,
     which is exactly --dot-xl as the old .er-mark set it, so the mark carries
     the same texture it always did and now says the right thing.
   - logo-wordmark.svg is the fourteen stacked outlines from the home hero on
     a tight viewBox measured with getBBox, 388.41 x 132.72. At --space-8 it
     renders 93 x 32 against the old live-type lockup's 92 x 29.

   Two requests, not one, and that is deliberate: both are under 6KB, they are
   identical on all five pages, and keeping them apart is what allows the
   order and the two scales to be set independently. Inlining them would be
   38KB of duplicated path data across the set.

   HEIGHT IS SET, WIDTH STAYS AUTO, on both. The width/height attributes in
   the markup are the intrinsic ratio only, present so the box is reserved
   before the SVG lands. A future edit that sets one axis and forgets the
   other cannot squash either lockup. That is the failure people describe as
   a logo looking "not accurate" without being able to say why. */

.er-header__mark,
.er-header__wordmark {
  display: block;
  width: auto;
}

.er-header__mark     { height: var(--space-5); }
.er-header__wordmark { height: var(--space-8); }

@media (max-width: 560px) {
  .er-header__mark     { height: var(--space-4); }
  .er-header__wordmark { height: var(--space-6); }
}

.er-doc-footer {
  background: var(--color-surface-sunken);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-10);
}

.er-doc-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.er-doc-footer__brand {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: var(--lead-sm);
  color: var(--color-text-muted);
}

.er-doc-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}

/* Standalone links, not links inside a sentence, so WCAG 2.2 2.5.8's inline
   exception does not cover them. Measured at 39x20 before this. */
.er-doc-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: var(--lead-sm);
  color: var(--color-interactive);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.er-doc-footer__links a:hover { color: var(--color-interactive-hover); text-decoration: underline; }

/* ============================================================================
   2. DOCUMENT HEADER

   Title, the eyebrow label, and the effective/updated line.

   THIS USED TO BE ITS OWN FULL WIDTH BAND ABOVE THE GRID, AND THAT IS THE
   BUG. It is now the first row of the same grid, in the same column as the
   article, and the change is worth explaining because the symptom did not
   look like a layout problem.

   Reported: "the left menu is vertically centered and it should be at the
   top." The table of contents was NOT centered. .er-doc__body declared
   align-items: start, and it computed to start. What was happening is that
   the masthead was a SIBLING above the grid, so the grid's first row, and
   with it the rail, began 369px down the page, measured on privacy at
   1512x800. That is 46% of the way down the opening screen, with an empty
   left column beside the title and nothing to explain it, which is what
   reads to the eye as vertical centering. Adding align-self or an override
   to the rail would have changed nothing, because nothing was centering it.

   Two things followed from the same cause. The rail had to travel 289px
   before its sticky offset engaged, so it visibly drifted upward on the
   first flick of the wheel, which is "it shouldn't scroll." And the masthead
   sat in .er-container--prose while the article sat in a grid cell of
   .er-container, two different containers with two different content widths,
   so the lede wrapped 64px short of the body text it introduced.

   With the masthead inside the content column, the rail starts level with
   the title, which is the top of the document, and one container owns every
   left edge on the page.
   ========================================================================== */

/* No padding-block. The masthead is a grid child now, so the grid's own
   row-gap already separates it from whatever comes next: the contents card
   under 1024px, the article above it. The padding-bottom that used to sit
   here was left over from when this was a sibling band above the grid, and it
   was being counted twice. Measured on terms at 1440px on September 26, 2026,
   the distance from the last line of the lede to the first h2 was 64px, built
   from 24px of padding here, 24px of row-gap, and 16px of section padding,
   which reads as an empty element sitting between them. It is 40px now. */
.er-doc__intro {
  min-width: 0;
  max-width: var(--container-prose);
  padding-block: 0;
}

.er-doc__eyebrow {
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.er-doc__title { margin-bottom: var(--space-3); }

.er-doc__meta {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: var(--lead-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}
.er-doc__meta strong { color: var(--color-text); font-weight: var(--wght-medium); }

.er-doc__lede {
  color: var(--color-text-muted);
  margin: 0;
  max-width: var(--measure);
}

/* ============================================================================
   3. TWO COLUMN BODY

   Three children in one grid: the masthead, the contents rail, and the
   article. The DOM order is masthead, rail, article, which is the order a
   screen reader and a narrow screen both want, and explicit placement moves
   the rail into a left column spanning both rows on wide screens. No order
   property and no reversal, so the reading order and the visual order agree
   at every width.

   Single column under 1024px, which is the one breakpoint this system uses
   for a navigation change (02-system-tokens.css section 4: "1024px
   navigation collapses to a drawer"). Here it collapses to a stack instead
   of a drawer, because a document has no floating trigger to hide the
   contents behind; the reader is already scrolling, so putting the contents
   under the title costs nothing.

   justify-content: center is load bearing and is the second half of "the
   legal pages look kind of dumb." The grid measures 240 + 48 + 736 = 1024px
   inside a --container of 1280px, so 208px of the container was dead space
   hanging off the right of every one of these pages. Centring the tracks
   inside the container balances it, and the alternative, widening the prose
   column, would have pushed a measure that is already long past readable.
   ========================================================================== */

.er-doc__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  padding-block: var(--space-12) var(--space-24);
  align-items: start;
}

@media (min-width: 1024px) {
  .er-doc__body {
    grid-template-columns: 240px minmax(0, var(--container-prose));
    column-gap: var(--space-12);
    row-gap: var(--space-6);
    justify-content: center;
  }
  .er-doc__toc     { grid-column: 1; grid-row: 1 / span 2; }
  .er-doc__intro   { grid-column: 2; grid-row: 1; }
  .er-doc__article { grid-column: 2; grid-row: 2; }
}

/* ============================================================================
   4. TABLE OF CONTENTS

   This exists for one reason: a Google, Zoom, Microsoft or carrier reviewer
   has to find a named section in seconds, not by reading the whole page.
   Every entry here is plain text matching its heading exactly, so a reviewer
   scanning for "Google" or "Zoom" finds it in the rail without opening
   anything.
   ========================================================================== */

/* Under 1024px the rail is a jump-links card sitting between the title and
   the first section, not a sticky rail. A sticky rail on a 390px screen
   either eats the screen or becomes a second scroll region fighting the
   page's own, and both are worse than no rail. The links lay out as wrapping
   chips rather than a fourteen row list, so on privacy the whole contents
   occupies six lines instead of fourteen and the reader reaches the document
   without a swipe. */
.er-doc__toc {
  min-width: 0;
  padding: var(--space-4);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

@media (min-width: 1024px) {
  .er-doc__toc {
    position: sticky;
    /* The header measures 65px. 80px clears it with 15px of air, and the
       grid's 48px top padding keeps the rail below this offset at rest, so
       it pins without being pushed down on first paint. */
    top: calc(var(--space-16) + var(--space-4));
    max-height: calc(100dvh - var(--space-20) - var(--space-8));
    overflow-y: auto;
    padding: 0 var(--space-2) 0 0;
    background: none;
    border: 0;
    border-radius: 0;
  }
}

.er-doc__toc-label {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  line-height: var(--lead-2xs);
  font-weight: var(--wght-semibold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.er-doc__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

.er-doc__toc-list a {
  display: flex;
  align-items: center;
  min-height: var(--space-8);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: var(--lead-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.er-doc__toc-list a:hover { color: var(--color-text); background: var(--color-hover-surface); }

@media (min-width: 1024px) {
  .er-doc__toc-list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    border-left: 1px solid var(--color-border);
  }
  .er-doc__toc-list a {
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    margin-left: -1px;
    border-left: 1px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  }
  .er-doc__toc-list a:hover { border-left-color: var(--color-border-control); }
}

/* Current section. aria-current carries it, the same way .er-nav__link and
   .er-rail__item already do in 04-components.css, so the markup and the
   accessibility tree cannot disagree. Weight and the left edge do the work
   alongside colour, because colour alone is not a channel. */
.er-doc__toc-list a[aria-current="true"] {
  color: var(--color-brand);
  background: var(--color-surface-brand-tint);
  font-weight: var(--wght-semibold);
}
@media (min-width: 1024px) {
  .er-doc__toc-list a[aria-current="true"] { border-left-color: var(--color-dot-filled); }
}

/* Sub-entries (a vendor's own scope list inside a longer section) read one
   step smaller and indented, so the rail still shows depth without a reader
   losing the top-level shape. */
.er-doc__toc-list .er-doc__toc-sub {
  list-style: none;
  margin: 0;
  padding: 0;
  display: contents;
}
.er-doc__toc-list .er-doc__toc-sub a { font-size: var(--text-xs); }

@media (min-width: 1024px) {
  .er-doc__toc-list .er-doc__toc-sub {
    display: block;
    padding: 0 0 0 var(--space-3);
  }
}

/* ============================================================================
   5. ARTICLE

   Prose measure, generous section rhythm, and headings that never lose the
   one property they most need in a document a reviewer jumps into directly
   from a link: knowing which section they landed in. scroll-margin-top keeps
   a deep link from surfacing a heading flush against the sticky header.
   ========================================================================== */

.er-doc__article { min-width: 0; }

/* Section rhythm. The gap above a heading is larger than the gap below it,
   so a heading belongs to the text under it rather than floating between two
   blocks. The hairline is what a reviewer skimming at speed uses to find the
   edge of a section, so it keeps its full separation. */
.er-doc__article section { padding-block: var(--space-4) var(--space-10); }
.er-doc__article section + section {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-10);
}

/* The scroll-margin-top that used to sit here is gone, and removing it was
   part of the fix rather than a tidy-up. It fired on almost nothing: all 39
   anchor ids on these pages are on the <section>, not on the heading, so the
   only element it ever applied to was the one h3 that carries its own id.
   html { scroll-padding-top } in 04-components.css covers every target now.

   Leaving both would have been worse than leaving neither. scroll-padding on
   the scrollport and scroll-margin on the target ADD, so #cookies would have
   cleared by 177px while every section cleared by 81px, and the page would
   have jumped by a different amount depending on which link you clicked. */

.er-doc__article h2 { margin-bottom: var(--space-5); }
.er-doc__article h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }

.er-doc__article h2,
.er-doc__article h3 {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  max-width: var(--measure);
}

/* A standalone control, not a link inside a sentence, so 2.5.8's inline
   exception does not apply to it. Measured at 19x27 before this. The size
   comes from the type scale rather than an em ratio, which is the one rule
   this file used to break. */
.er-doc__anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-6);
  min-height: var(--space-6);
  font-family: var(--font-ui);
  font-weight: var(--wght-regular);
  font-size: var(--text-sm);
  line-height: var(--lead-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.er-doc__article h2:hover .er-doc__anchor,
.er-doc__article h3:hover .er-doc__anchor,
.er-doc__anchor:focus-visible {
  opacity: 1;
}
.er-doc__anchor:hover { color: var(--color-interactive); }

/* A touch screen has no hover, so an anchor that only appears on hover is an
   anchor that never appears. It stays visible and quiet there instead. */
@media (hover: none) {
  .er-doc__anchor { opacity: 1; color: var(--color-text-disabled); }
}

/* overflow-wrap is not decoration. A legal document quotes bare URLs, and a
   bare URL is one unbreakable word. Measured at 360px on September 26, 2026:
   the placeholder URL in the sub-processors list pushed the document to
   370px and the whole page scrolled sideways by 10px, while every element's
   own box stayed inside the viewport, because a text run overflowing its
   parent does not change that parent's rect. That is why the element trace
   came back empty and only the document width showed it. break-word rather
   than anywhere, so it only breaks a word that cannot fit on a line by
   itself and ordinary prose is untouched. */
.er-doc__article p,
.er-doc__article li {
  color: var(--color-text);
  max-width: var(--measure);
  line-height: var(--lead-lg);
  overflow-wrap: break-word;
}
.er-doc__article p { margin: 0 0 var(--space-5); }
.er-doc__article ul,
.er-doc__article ol { margin: 0 0 var(--space-5); padding-left: var(--space-6); }
.er-doc__article li { margin-bottom: var(--space-3); }
.er-doc__article li:last-child { margin-bottom: 0; }

.er-doc__article strong { font-weight: var(--wght-semibold); color: var(--color-text); }

.er-doc__article a { color: var(--color-interactive); text-decoration: underline; text-underline-offset: 0.15em; }
.er-doc__article a:hover { color: var(--color-interactive-hover); }

.er-doc__article .er-table-wrap { margin-bottom: var(--space-5); }

/* ============================================================================
   6. PLACEHOLDER AND DECISION BLOCKS

   Two distinct callouts, both built on .er-note so they inherit its measured
   contrast rather than a new one:

     .er-doc__placeholder   this section's real text is being drafted
                             elsewhere and has not landed yet
     .er-doc__decision      this is a genuine commercial or legal term that
                             needs a decision, not a draft

   Both stay on the info tint. Neither uses the signal family. See the file
   header for why.
   ========================================================================== */

.er-doc__placeholder,
.er-doc__decision {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  border: 1px dashed var(--color-border-control);
  margin-bottom: var(--space-4);
}

.er-doc__placeholder-label {
  display: inline-flex;
}

.er-doc__placeholder p,
.er-doc__decision p {
  margin: 0;
  color: var(--color-text);
  max-width: none;
}
.er-doc__placeholder p + p,
.er-doc__decision p + p { margin-top: var(--space-2); }

.er-doc__placeholder em,
.er-doc__decision em { color: var(--color-text-muted); font-style: italic; }

/* ============================================================================
   7. REDUCED MOTION

   The only motion in this file is the anchor's opacity fade and the toc
   link's colour transition, both already gated to --dur-fast on --ease,
   which has no position component. Nothing here needs a reduced-motion
   override beyond what 04-components.css already sets globally, and that is
   worth stating rather than leaving silent: an animation-free file is not an
   oversight here, it is the correct amount of motion for a page someone is
   reading under deadline pressure.
   ========================================================================== */