/* ==========================================================================
   Legal — the documents, their index, and the acceptance gate

   Long-form prose, which the rest of the application has none of: the type is
   larger and the measure narrower than anywhere else on purpose, because these
   are pages somebody has to actually read.
   ========================================================================== */
/* The application's base stylesheet gives html and body `height: 100%` and
   `overflow: hidden`, because every other screen scrolls a pane inside a fixed
   shell. A legal document is the page, so something here has to scroll — and it
   has to be the body.

   Releasing html instead is the obvious way and is the one that cannot work.
   These pages are reached from inside the application by an ordinary Turbo visit
   — the Legal item in the user menu, a link in the middle of another document —
   and a Turbo visit swaps the body and leaves html's attributes exactly as the
   page before it left them. So a class on html is present on a full page load and
   absent on every navigation: the document lays out four thousand pixels tall
   inside an html still locked to the viewport, and nothing scrolls at all. It
   leaks the other way too, releasing the application's own shell on the way back
   in.

   The body is replaced on every visit, so the body is where this belongs. It
   keeps the base's `height: 100%`, which is what makes it a scrollport rather
   than a box that simply grows — and a scrollport is what the sticky header
   below needs in order to have anything to stick to. Give the body `height: auto`
   and the header silently loses its stickiness, which is what happened the first
   time this was tried. */
.legal-body {
  overflow-y: auto;
  background-color: var(--color-canvas);
}

/* == header == */
/* Sticky rather than static: a reader four screens into the privacy notice needs
   the way back where they are, not where they started. */
.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-primary-dark);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.legal-header__brand {
  display: inline-flex;
}

.legal-header__logo {
  width: 120px;
  height: auto;
}

.legal-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.legal-header__link {
  font-size: var(--font-size-medium);
  font-weight: 600;
  color: var(--color-white);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--tint-white-24);
  border-radius: var(--radius-full);
  transition: background-color var(--transition-base);
}

.legal-header__link:hover {
  background-color: var(--tint-white-10);
}

/* button_to wraps its button in a form, which would otherwise break the
   header's flex row. */
.legal-header__link--button {
  font-family: inherit;
  background: none;
  cursor: pointer;
}

/* The way back into the application — the primary action on these pages, so it
   is filled rather than outlined. */
.legal-header__link--back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--color-primary-green);
  border-color: var(--color-primary-green);
}

.legal-header__link--back:hover {
  background-color: var(--color-primary-green);
  filter: brightness(0.95);
}

.legal-header__link-icon {
  flex-shrink: 0;
  color: currentColor;
}

/* == the document page == */
.legal-doc {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-10);
}

.legal-doc__paper {
  padding: var(--space-10);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.legal-doc__masthead {
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.legal-doc__eyebrow {
  font-size: var(--font-size-small);
  font-family: var(--font-family-bold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.legal-doc__title {
  font-size: var(--font-size-xxxlarge);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-3);
}

.legal-doc__lede {
  font-size: var(--font-size-large);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.legal-doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-5);
}

.legal-doc__meta-item dt {
  font-size: var(--font-size-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--color-text-faint);
  margin-bottom: var(--space-1);
}

.legal-doc__meta-item dd {
  font-size: var(--font-size-medium);
  color: var(--color-text);
}

/* == the prose itself == */
.legal-doc__body {
  font-size: var(--font-size-large);
  line-height: 1.7;
  color: var(--color-text);
}

.legal-doc__section + .legal-doc__section {
  margin-top: var(--space-8);
}

.legal-doc__section h2 {
  font-size: var(--font-size-xlarge);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-3);
}

.legal-doc__section p + p,
.legal-doc__section ul + p,
.legal-doc__section p + ul {
  margin-top: var(--space-3);
}

.legal-doc__section ul {
  padding-left: var(--space-5);
}

.legal-doc__section li + li {
  margin-top: var(--space-2);
}

.legal-doc__section a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-doc__section code {
  padding: 2px var(--space-1);
  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
  font-size: 0.9em;
  background-color: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* The clause the reader most needs to notice — the precedence clause on the
   adviser terms, and the controller/processor split on the privacy notice. */
.legal-doc__section--emphasis {
  padding: var(--space-5);
  background-color: var(--tint-green-10);
  border-left: 3px solid var(--color-primary-green);
  border-radius: var(--radius-md);
}

/* A company detail nobody has filled in yet (see LegalHelper#legal_detail).
   Loud on purpose. */
.legal-doc__placeholder {
  padding: 0 var(--space-1);
  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
  font-size: 0.85em;
  color: var(--color-warning-dark);
  background-color: var(--color-yellow-100);
  border: 1px dashed var(--color-warning);
  border-radius: var(--radius-sm);
}

/* == the cookie table == */
.legal-doc__table-wrapper {
  margin: var(--space-4) 0;
  overflow-x: auto;
}

.legal-doc__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-medium);
}

.legal-doc__table th,
.legal-doc__table td {
  padding: var(--space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.legal-doc__table th {
  font-size: var(--font-size-small);
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* == the index == */
.legal-index {
  list-style: none;
  padding: 0;
}

.legal-index__item + .legal-index__item {
  margin-top: var(--space-3);
}

.legal-index__link {
  display: block;
  padding: var(--space-5);
  text-decoration: none;
  background-color: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.legal-index__link:hover {
  border-color: var(--color-primary-green);
  box-shadow: var(--shadow-sm);
}

.legal-index__title {
  display: block;
  font-family: var(--font-family-bold);
  font-weight: 600;
  font-size: var(--font-size-xlarge);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-2);
}

.legal-index__summary {
  display: block;
  font-size: var(--font-size-medium);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.legal-index__meta {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-small);
  color: var(--color-text-faint);
}

/* ==========================================================================
   The acceptance gate
   ========================================================================== */
.legal-gate {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-10);
}

.legal-gate__intro {
  margin-bottom: var(--space-6);
}

.legal-gate__title {
  font-size: var(--font-size-xxxlarge);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-3);
}

.legal-gate__lede {
  font-size: var(--font-size-large);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.legal-gate__flash {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  font-size: var(--font-size-medium);
  color: var(--color-danger);
  background-color: var(--tint-danger-10);
  border-radius: var(--radius-md);
}

/* == one document == */
.legal-gate__document {
  margin-bottom: var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.legal-gate__document-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.legal-gate__document-title {
  font-size: var(--font-size-xlarge);
  color: var(--color-primary-dark);
}

.legal-gate__document-meta {
  margin-top: var(--space-1);
  font-size: var(--font-size-small);
  color: var(--color-text-faint);
}

.legal-gate__document-link {
  flex-shrink: 0;
  font-size: var(--font-size-medium);
  font-weight: 600;
  color: var(--color-primary-dark);
  white-space: nowrap;
}

/* Capped so the tick box stays reachable on a page holding two full documents;
   tall enough that the reader is not scrolling a letterbox. */
.legal-gate__document-body {
  max-height: 380px;
  padding: var(--space-5);
  overflow-y: auto;
  font-size: var(--font-size-medium);
}

.legal-gate__document-body:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring);
}

/* == the tick box == */
.legal-gate__form {
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.legal-gate__confirm {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.legal-gate__checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--color-primary-green);
  cursor: pointer;
}

.legal-gate__confirm-text {
  font-size: var(--font-size-large);
  line-height: 1.5;
  color: var(--color-text);
}

.legal-gate__actions {
  margin-top: var(--space-5);
}

.legal-gate__footnote {
  margin-top: var(--space-4);
  font-size: var(--font-size-small);
  line-height: 1.5;
  color: var(--color-text-faint);
}

@media (max-width: 640px) {
  .legal-doc__paper {
    padding: var(--space-5);
  }

  .legal-gate__document-header {
    flex-direction: column;
  }
}