/* Share: the repository check, the three marks, the Pages button and the
   table of other places to ship. Every class here starts with share-. */

.share { max-width: 78rem; margin: 0 auto; }
.share .page-title { margin-bottom: 1.5rem; }
.share h2 { margin: 2.5rem 0 0.5rem; font-size: 1.35rem; font-weight: 650; letter-spacing: -0.01em; }

.share-repo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0 1rem;
  max-width: 38rem;
  margin-top: 1.5rem;
}
.share-repo label {
  grid-column: 1;
  margin: 0;
}
.share-repo .primary {
  grid-column: 2;
  margin: 0;
}

.share-token { max-width: 38rem; margin-top: 0.75rem; }
.share-token a { color: var(--ink); }

/* Three marks: a filled square in the colour of the score. */
.share-checks {
  list-style: none;
  max-width: 58rem;
  margin: 1.5rem 0 0;
  padding: 0;
}
.share-check {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--hair);
}
.share-sentence { line-height: 1.5; }
.share-mark {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  border: 1.5px solid currentColor;
  background: transparent;
}
.share-mark-ok { color: var(--ok); background: currentColor; }
.share-mark-bad { color: var(--bad); background: currentColor; }
.share-mark-mid { color: var(--mid); background: currentColor; }

.share-pages { max-width: 58rem; margin-top: 1.5rem; }
.share-live { margin: 0; }
.share-live a { overflow-wrap: anywhere; }
.share-pages .primary { margin-top: 0; }
.share-note { margin: 0.5rem 0 0; }

/* The other places, laid out like the Rules table. */
.share-places {
  width: 100%;
  margin: 1.5rem 0 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.92rem;
}
.share-places th,
.share-places td {
  padding: 0.7rem 0.75rem 0.7rem 0;
  border-bottom: 1px solid var(--hair);
  text-align: left;
  vertical-align: top;
}
.share-places th {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ink);
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--quiet);
}
.share-places th:nth-child(1) { width: 30%; }
.share-places th:nth-child(2) { width: 30%; }

@media (max-width: 61.99rem) {
  .share-repo { grid-template-columns: minmax(0, 1fr); }
  .share-repo label,
  .share-repo .primary { grid-column: 1; }
  .share-repo .primary {
    width: 100%;
    margin-top: 0.75rem;
    min-height: 44px;
  }
  .share-token input[type="password"] { min-height: 44px; }

  .share-places { display: block; table-layout: auto; font-size: 0.95rem; }
  .share-places thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .share-places tbody { display: block; }
  .share-places tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--hair);
  }
  .share-places td { display: block; width: auto; padding: 0; border: 0; }
  .share-places td:first-child { font-weight: 600; }
  .share-places td + td {
    margin-top: 0.35rem;
    color: var(--quiet);
    font-size: 0.9rem;
  }
}