/* ============================================================================
   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. Nothing here overrides that component. This page adds only the
   footer, which the rest of the system has not needed yet.
   ========================================================================== */

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

.er-doc-footer__links a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: var(--lead-sm);
  color: var(--color-interactive);
  text-decoration: none;
}
.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. Sits on its own
   full-width band so it reads before the two-column body begins, the same
   way a masthead reads before a story does.
   ========================================================================== */

.er-doc__intro { padding-block: var(--space-12) var(--space-8); }

.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

   A sticky table of contents rail plus the article. 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 first costs nothing.
   ========================================================================== */

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

@media (min-width: 1024px) {
  .er-doc__body { grid-template-columns: 240px minmax(0, var(--container-prose)); }
}

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

.er-doc__toc {
  order: -1;
  min-width: 0;
}

@media (min-width: 1024px) {
  .er-doc__toc {
    order: 0;
    position: sticky;
    top: calc(var(--space-16) + var(--space-4));
    max-height: calc(100dvh - var(--space-16) - var(--space-8));
    overflow-y: auto;
    padding-right: var(--space-2);
  }
}

.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-direction: column;
  gap: var(--space-1);
  border-left: 1px solid var(--color-border);
}

.er-doc__toc-list a {
  display: block;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  margin-left: -1px;
  border-left: 1px solid transparent;
  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), border-color var(--dur-fast) var(--ease);
}
.er-doc__toc-list a:hover { color: var(--color-text); border-left-color: var(--color-border-control); }

/* 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 0 0 var(--space-3);
}
.er-doc__toc-list .er-doc__toc-sub a { font-size: var(--text-xs); }

/* ============================================================================
   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; }

.er-doc__article section { padding-block: var(--space-8); }
.er-doc__article section + section { border-top: 1px solid var(--color-border); }

.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-4); }
.er-doc__article h3 { margin-top: var(--space-6); margin-bottom: var(--space-3); }

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

.er-doc__anchor {
  font-family: var(--font-ui);
  font-weight: var(--wght-regular);
  font-size: 0.8em;
  color: var(--color-text-muted);
  text-decoration: none;
  opacity: 0;
  transition: opacity 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); }

.er-doc__article p,
.er-doc__article li {
  color: var(--color-text);
  max-width: var(--measure);
}
.er-doc__article p { margin: 0 0 var(--space-4); }
.er-doc__article ul,
.er-doc__article ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.er-doc__article li { margin-bottom: var(--space-2); }
.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.
   ========================================================================== */