/*
 * The legal shelf: a rail of documents on the left, one document on the right.
 *
 * Loaded ON TOP of `/pages.css`, which keeps the typography, the top bar and
 * the ordinary page furniture that `/rules` and `/help` also use. Only the shelf
 * lives here.
 *
 * There is a comment on the Terms of Use saying a legal page is the same kind of
 * page as the rules and does not need a stylesheet of its own. That was true of
 * one document on a single column. It stopped being true at four: they are a set
 * you move between, the set needs a rail, and a rail is a layout the other pages
 * neither have nor want. So this file exists, and it is scoped to `/legal/`.
 *
 * The document reads as a document: a sheet with an edge, sitting on the page,
 * rather than text running loose on the background. That is the point of the
 * shape — a contract you can see the boundaries of feels like a thing that was
 * drafted, and a wall of prose on black feels like a page that got long.
 */

/* The names this file needs that `/pages.css` does not have.
 *
 * `pages.css` carries a small palette of its own: surfaces, ink, two borders and
 * the greens. It has no radii, no gutter and no strong border, because the pages
 * it was written for never needed them. An undeclared custom property does not
 * fall back — the whole declaration is dropped — so `border: 1px solid
 * var(--border-strong)` painted no border at all and `padding: … var(--gutter)`
 * left the sheet running edge to edge on a phone. Both were invisible failures.
 * The values are the app's, from `src/index.css`. */
:root {
  --gutter: clamp(20px, 5vw, 48px);
  --border-strong: rgba(255, 255, 255, 0.3);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
}

/* ── The shelf ─────────────────────────────────────────────────────────── */

.shelf {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 46px) var(--gutter) clamp(60px, 8vw, 96px);
}

/* Sticky, because a rail you have to scroll back up to reach is a rail that
   only works on the first screen, and these documents are thirty screens. */
.shelf__rail {
  position: sticky;
  top: 24px;
  align-self: start;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.shelf__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  font-size: 13px;
  font-weight: 600;
}

.shelf__back:hover {
  color: var(--green-text);
}

.shelf__railTitle {
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The rail carries two groups: the pages that explain the product, and the ones
   that bind you. They are different kinds of reading and the gap says so. */
.shelf__list + .shelf__railTitle {
  margin-top: 28px;
}

.shelf__list {
  display: grid;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shelf__list a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1.35;
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.16s ease;
}

.shelf__list a:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* The one you are reading. Green, because green is the page's word for "this
   one is yours" everywhere else on the site. */
.shelf__list a[aria-current='page'] {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  box-shadow: inset 2px 0 0 var(--green);
  color: var(--green-text);
  font-weight: 700;
}

/* ── The sheet ─────────────────────────────────────────────────────────── */

/* Generous margins on all four sides. A contract printed to the edge of the
   paper reads as a printout; the white space around the block is half of what
   makes it read as a drafted document. */
.sheet {
  padding: clamp(28px, 4vw, 56px) clamp(24px, 4.4vw, 64px) clamp(44px, 5.5vw, 72px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #131418 0%, #0b0c0e 62%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* `main` in `pages.css` is a centred 760px column with its own padding, and
   inside the shelf the grid owns the width. So the width and the margin are
   handed back here.
 *
 * The padding is NOT, and that was a real bug: this rule is `.shelf main`,
   which outranks `.sheet` on specificity, so a `padding: 0` here silently beat
   the sheet's own padding and every document ran flush against its border.
   `.sheet` (0,1,0) already outranks bare `main` (0,0,1), so saying nothing is
   what lets the sheet's padding through. */
.shelf main {
  width: auto;
  max-width: none;
  margin: 0;
}

/* ── The document's own type ───────────────────────────────────────────────
 *
 * `pages.css` is set for marketing pages: a 54px display headline over 17px
 * prose, with the body in a blue-grey. A contract is not read that way. It is
 * read closely, in order, by somebody looking for a specific clause, and every
 * one of those wants the opposite: smaller type, tighter steps between the
 * levels, and one ink.
 *
 * ONE INK, and that is the important one. The greys here are `pages.css`'s
 * `--text-muted` and `--text-dim`, and a de-emphasised body is exactly what a
 * legal document must not have: nothing in it is a footnote to anything else,
 * and a reader skimming for the clause that binds them should not have to fight
 * a 60% grey to find it. Hierarchy is carried by size, weight and space. Links
 * keep their green, which is the one distinction that means something.
 */
.sheet,
.sheet p,
.sheet ul,
.sheet ol,
.sheet li,
.sheet td,
.sheet th,
.sheet .lead,
.sheet .meta,
.sheet .breadcrumb,
.sheet .callout,
.sheet .draft,
.sheet .sheet__contact {
  color: var(--text);
}

.sheet .breadcrumb {
  margin-bottom: 18px;
  font-size: 11px;
}

/* The title of a document, not the headline of a page. */
.sheet h1 {
  margin-bottom: 0;
  font-size: clamp(23px, 2.6vw, 31px);
  letter-spacing: -0.02em;
}

.sheet .meta {
  margin-top: 8px;
  font-size: 12.5px;
  opacity: 0.72;
}

.sheet .lead {
  font-size: 15px;
  line-height: 1.7;
}

/* Section, sub-section, body: three steps, close together. A contract's heading
   is a signpost, not a banner — it only has to be findable when you scroll. */
.sheet h2 {
  margin-top: 38px;
  font-size: clamp(16px, 1.5vw, 18px);
  letter-spacing: -0.01em;
}

.sheet h3 {
  margin-top: 22px;
  font-size: 14.5px;
}

.sheet p,
.sheet li {
  font-size: 14px;
  line-height: 1.72;
}

/* A measure, so a clause is read rather than scanned across. At 14px this is
   about 640px: the length a line can be before the eye loses the start of the
   next one. The table, the contents and the panels keep the full width — they
   are looked at, not read line by line. */
.sheet > p,
.sheet > ul,
.sheet > ol,
.sheet .callout p,
.sheet .draft {
  max-width: 660px;
}

.sheet ul,
.sheet ol {
  padding-left: 22px;
}

.sheet li + li {
  margin-top: 7px;
}

.sheet .callout,
.sheet .draft {
  font-size: 13.5px;
  line-height: 1.7;
}

.sheet h2 + p,
.sheet h2 + ul,
.sheet h2 + ol,
.sheet h2 + div {
  margin-top: 10px;
}

/* A rule above each numbered section, so the eye can find where one ends. */
.sheet h2::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: 20px;
  background: var(--border-soft);
}

.sheet h2:first-of-type::before {
  display: none;
}

/* The tables in the Privacy Policy: category, what it means, whether we collect
   it. Ruled rows, because that is what makes a table a table. */
.sheet table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.sheet th {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
}

.sheet td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--border-soft);
  line-height: 1.6;
  vertical-align: top;
}

.sheet td:last-child,
.sheet th:last-child {
  padding-right: 0;
}

/* ── The shelf's front page ────────────────────────────────────────────── */

.shelf__docs {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

.shelf__doc {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

.shelf__doc:hover {
  border-color: color-mix(in srgb, var(--green) 40%, var(--border));
  background: color-mix(in srgb, var(--green) 7%, transparent);
}

.shelf__docName {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.shelf__docBody {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  opacity: 0.72;
}

/* ── Narrow ────────────────────────────────────────────────────────────── */

/* The rail goes on top and stops being sticky. A sticky rail that is as tall as
   the phone is a rail that hides the document. */
@media (max-width: 900px) {
  .shelf {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .shelf__rail {
    position: static;
    max-height: none;
  }

  .shelf__list {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .shelf__list a {
    white-space: nowrap;
    border: 1px solid var(--border-soft);
  }

  .sheet {
    border-radius: var(--r-md);
  }
}

/* The block of addresses at the end of a document. `.contact` in `pages.css` is
   the green button /rules and /help finish on; a list of three mailboxes is not
   a button, so it gets its own quiet panel. */
.sheet__contact {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
  font-size: 15px;
  line-height: 1.9;
}

/* The rule the documents use between blocks. The browser's default is a grey
   inset border; this is the same hairline the rest of the sheet uses. */
.sheet hr {
  height: 1px;
  margin: 30px 0;
  border: 0;
  background: var(--border-soft);
}