/* ---------------------------------------------------------------------------
   Guides, comparisons, help and the legal pages: a reading surface.
   Wise's help-article shape: a short trail back (guides), the title, the answer
   first, an index of the sections once there are three or more, then the body in
   one narrow column. The contents list is a plain list, never a card; on a wide
   screen it stands beside the text and marks the section being read with a rule
   and a heavier weight (never colour alone).
   --------------------------------------------------------------------------- */

.legal {
  padding-block: var(--space-sections) var(--section-pad);
}

/* --- the trail --------------------------------------------------------------- */

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-tight);
  list-style: none;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-tight);
  color: var(--muted);
  font-size: var(--fs-small);
}

.breadcrumb li + li::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--icon-caret-right) center / contain no-repeat;
  mask: var(--icon-caret-right) center / contain no-repeat;
}

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--muted);
  font-weight: 500;
}

/* --- the head of the page ------------------------------------------------------ */

.legal__header {
  display: grid;
  justify-items: start;
  gap: var(--space-text);
  max-width: 46rem;
}

/* The answer first (Wise Help articles): the page's opening line, in the text colour. */
.legal__meta {
  max-width: var(--measure);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

/* --- contents ------------------------------------------------------------------- */

.legal__toc {
  max-width: var(--measure);
  margin-top: var(--space-sections);
  padding-top: var(--space-component);
  border-top: 1px solid var(--divider);
}

.legal__toc-title {
  margin-bottom: var(--space-text);
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 500;
}

.legal__toc-list {
  list-style: none;
}

.legal__toc-list li {
  break-inside: avoid;
}

/* Each entry keeps a 2px slot on its left; the section being read fills it with the ink
   and takes the heavier weight. */
.legal__toc-list a {
  display: block;
  padding: 6px 0 6px var(--space-cards);
  box-shadow: inset 2px 0 0 transparent;
  color: var(--text);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: var(--lh-small);
}

/* Rows draw their focus ring inside, so the scrolling contents column never clips it. */
.legal__toc-list a:focus-visible {
  outline-offset: -2px;
}

.legal__toc-list a[aria-current="location"] {
  box-shadow: inset 2px 0 0 var(--text);
  font-weight: 600;
}

@media (min-width: 48rem) and (max-width: 61.99rem) {
  .legal__toc-list {
    columns: 2;
    column-gap: var(--space-sections);
  }
}

/* A wide screen: the contents stand beside the text and stay in view. */
@media (min-width: 62rem) {
  .legal > .shell {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 46rem);
    column-gap: clamp(40px, 5vw, 96px);
    align-items: start;
  }

  .legal__header {
    grid-column: 1 / -1;
  }

  .legal__toc {
    position: sticky;
    top: calc(var(--header-h) + var(--space-button));
    max-height: calc(100vh - var(--header-h) - 48px);
    margin-top: var(--section-pad);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--divider) transparent;
  }

  .legal__body {
    grid-column: 2;
  }
}

/* --- the body -------------------------------------------------------------------- */

.legal__body {
  max-width: var(--measure);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.legal__body section {
  padding-top: var(--section-pad);
}

.legal__body h2 {
  margin-bottom: var(--space-component);
  font-size: var(--fs-h3);
  line-height: var(--lh-title);
}

.legal__body h3 {
  margin-top: var(--space-button);
  margin-bottom: var(--space-text);
  font-size: var(--fs-h4);
  line-height: var(--lh-title);
}

.legal__body h2 + h3 {
  margin-top: 0;
}

/* A guide index lists its guides as titled rows: the title is the whole link, the line
   under it is muted. Only those rows: an ordinary heading's first paragraph keeps the
   text colour. */
.legal__body :is(h2, h3) > a:only-child {
  color: var(--text);
  text-decoration-line: none;
}

.legal__body :is(h2, h3) > a:only-child:hover {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
}

.legal__body :is(h2, h3):has(> a:only-child) + p {
  color: var(--muted);
}

/* The generated guide indexes: one flat list of rows (no groups), each a heading link and
   its line. */
.guide-row h2 {
  margin-bottom: var(--space-text);
  font-size: var(--fs-h4);
}

.guide-row + .guide-row {
  margin-top: var(--space-button);
}

.legal__body p + p,
.legal__body p + ul,
.legal__body p + ol,
.legal__body ul + p,
.legal__body ol + p,
.legal__body p + .flow-table-wrap,
.legal__body .flow-table-wrap + p,
.legal__body p + table,
.legal__body table + p,
.legal__body p + .button,
.legal__body .button + p,
.legal__body p + dl,
.legal__body dl + p {
  margin-top: var(--space-component);
}

.legal__body ul,
.legal__body ol {
  padding-left: 1.4em;
}

.legal__body li + li {
  margin-top: var(--space-text);
}

.legal__body li::marker {
  color: var(--muted);
}

.legal__body dl {
  margin-top: var(--space-component);
}

.legal__body dt {
  margin-top: var(--space-cards);
  font-weight: 600;
}

.legal__body dd {
  margin-top: var(--space-tight);
  color: var(--muted);
}

/* A guide's one real app screen, in the site's phone, under the paragraph it shows. */
.legal__body * + .guide-figure,
.legal__body .guide-figure + * {
  margin-top: var(--space-button);
}

.guide-figure {
  display: grid;
  justify-items: center;
  gap: var(--space-cards);
}

.guide-figure figcaption {
  text-align: center;
}

/* The way back closes the body. */
.legal__more {
  margin-top: var(--section-pad);
  padding-top: var(--space-button);
  border-top: 1px solid var(--divider);
}

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-text);
  min-height: var(--tap);
  font-size: var(--fs-label);
}

.legal__back .icon {
  --icon-size: 16px;
}