/* System pages (rufio, Eliot, compliify).
 *
 * Built on subpage.css: the same header, footer, type scale and colours. This file only adds what a system page has
 * and a legal page has not: breadcrumbs, a status line, a lede, calls to action, point lists, steps and the list of
 * the other systems. Greys are the ones the homepage uses for secondary text, darkened to 4.5:1 on white. */

/* subpage.css makes the body a one-column grid whose track sizes to its widest content. The install command is
 * an unbreakable line, so without this it stretches the whole page (header included) past a phone's width; the
 * code block scrolls inside itself instead. */
body { grid-template-columns: minmax(0, 1fr); }

.crumbs {
   margin-block: 0 2.5rem;
   font-size: .95rem;
   color: #7b7371;
}

.crumbs a {
   color: inherit;
   text-decoration: none;
}

.crumbs a:hover { text-decoration: underline; }

.crumbs [aria-current] { color: #181213; }

.status {
   margin: 0 0 1rem;
   font-size: .85rem;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: #7b7371;
}

.system h1 { margin-block-end: 1.75rem; }

.lede {
   max-inline-size: 62ch;
   margin-block: 0 2rem;
   font-size: clamp(1.2rem, 1.9vw, 1.5rem);
   line-height: 1.45;
}

/* Calls to action: the pill is the same as the homepage's hero links and the header's Log in. */
.cta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 1rem 1.5rem;
   margin-block: 0 1rem;
}

.cta__button {
   color: inherit;
   text-decoration: none;
   border: 1px solid currentColor;
   border-radius: 1.5rem;
   padding: .75rem 2rem;
   font-size: .95rem;
   transition: background-color .33s, color .33s, border-color .33s;

   &:hover {
      background: rgb(0 72 90);
      border-color: transparent;
      color: #fff;
   }
}

.cta__link {
   color: inherit;
   text-underline-offset: .25em;
}

.system section { margin-block-start: 3.5rem; }

.system section > h2 { margin-block-start: 0; }

/* What it does: each point is a short bold line and the sentence that backs it. */
.points {
   display: grid;
   gap: 1.25rem;
   margin: 1.25rem 0 0;
   padding: 0;
   list-style: none;

   li {
      margin: 0;
      padding-inline-start: 1.25rem;
      border-inline-start: 3px solid rgb(223 151 132);
   }

   strong {
      display: block;
      font-weight: 400;
   }
}

/* How it works */
.steps {
   counter-reset: step;
   margin: 1.25rem 0 0;
   padding: 0;
   list-style: none;

   li {
      counter-increment: step;
      position: relative;
      margin-block: 1.5rem;
      padding-inline-start: 3.5rem;
   }

   li::before {
      content: counter(step);
      position: absolute;
      inset-block-start: .1rem;
      inset-inline-start: 0;
      display: grid;
      place-items: center;
      inline-size: 2.25rem;
      block-size: 2.25rem;
      border: 1px solid currentColor;
      border-radius: 50%;
      font-size: .95rem;
   }

   strong {
      display: block;
      font-weight: 400;
   }
}

/* The install command on the compliify page */
.code {
   margin: 1.25rem 0 0;
   padding: 1rem 1.25rem;
   overflow-x: auto;
   background: #f4f1ec;
   border-radius: .75rem;
   font: .95rem/1.8 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
   white-space: pre;
}

/* The other systems */
.others__list {
   margin: 1.25rem 0 0;
   padding: 0;
   list-style: none;

   li {
      margin: 0;
      border-bottom: 1px solid;
   }

   a {
      display: grid;
      gap: .15rem;
      padding-block: 1.1rem;
      color: inherit;
      text-decoration: none;
   }

   a:hover strong { text-decoration: underline; }

   strong { font-weight: 400; }

   span { color: #7b7371; }
}