/* ============================================================================
   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, and why it is one image rather than markup.

   These pages used to draw the logo out of DOM: a .er-mark of seven .er-dot
   spans in rows of four and three, plus .er-logotype setting the words
   "Expanding" and "Ranks" as live Archivo text. It was wrong in every
   dimension a reader could see. The designer's mark is TWENTY-TWO dots in
   four rows of 4, 5, 6 and 7, counted in all six lockups under brand/logo/SVG
   as twenty-two <circle> elements. The header was showing seven of them, and
   two rows instead of four, so the one idea the mark exists to carry, ranks
   expanding as they descend, could not be read at all. The wordmark was live
   type at tracking that ran opposite to the drawn letterforms, which breaks
   the designer's optical justification: in the artwork the two words are cut
   to the same width within 0.10%, and the CSS version rendered RANKS roughly
   a quarter narrower than EXPANDING.

   site/index.html:64 already carried the rule, and the header was the one
   place ignoring it: "The wordmark is outlined vector from brand/logo/SVG,
   not type set in CSS ... Do not replace these paths with live text."

   So this is the artwork itself. site/logo-expanding-ranks.svg is
   RanksLogo-Horz-Logo-Txt-WhtBG.svg with its 27KB C2PA provenance manifest
   stripped, 22 circles and 14 paths preserved and asserted on write. The
   HORIZONTAL lockup is the right one of the six here: the home page's stacked
   lockup would put a four-pixel wordmark in a 65px header.

   ONE image, not five inlined copies, because it is identical on every page
   and a cached request beats 38KB of duplicated path data.

   width and height are the intrinsic ratio only. Height is set here and width
   stays auto, so the aspect ratio cannot be squashed by a future edit that
   sets one axis and forgets the other. That is the failure people describe as
   a logo looking "not accurate" without being able to say why. */

.er-header__logo {
  display: block;
  height: var(--space-8);
  width: auto;
}

@media (max-width: 560px) {
  .er-header__logo { 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.
   ========================================================================== */

.er-doc__intro {
  min-width: 0;
  max-width: var(--container-prose);
  padding-block: 0 var(--space-6);
}

.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);
}

.er-doc__article h2,
.er-doc__article h3 {
  scroll-margin-top: calc(var(--space-16) + var(--space-8));
}

.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.
   ========================================================================== */