/* packages.css -- the three rules the package pages need on top of the
   documentation stylesheet, which they otherwise share whole (site/DESIGN.md).
   Every colour is one of the design tokens, so light, dark and the contrast
   floor are the site's and not a second set to keep in step.

   It is served by mcweb from inside the binary (#embed), not from the docs
   tree: the tree is rendered by mcsite out of minicompiler/mc and nothing here may
   write into it. */

.pkg-search {
  display: flex;
  gap: var(--s2);
  align-items: center;
  margin: var(--s4) 0;
}

.pkg-search input {
  flex: 0 1 24ch;
  padding: var(--s1) var(--s3);
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

.pkg-search input::placeholder { color: var(--text-muted); }

/* a tree hash is 64 hex characters and no line of prose is that wide */
code.hash {
  font-size: 0.85em;
  word-break: break-all;
}

/* /me: the account card. The avatar is the one external image the content
   security policy allows (web/response.mc), and it is square by construction --
   GitHub serves it that way -- so the radius is the only shaping needed. */
.me-card {
  display: flex;
  gap: var(--s3);
  align-items: center;
  margin: var(--s4) 0;
}

.me-avatar {
  border-radius: var(--radius);
  background: var(--surface);
}

.me-name { margin: 0; }

/* the legal pages, and the three documents shown in full on /welcome. A
   document is long, so it gets the reading measure the documentation body
   uses and a rule between it and the checkbox that accepts it. */
.legal-doc {
  margin: var(--s5) 0;
  padding: 0 0 var(--s3) 0;
  border-bottom: 1px solid var(--border);
}

.accept-line {
  display: flex;
  gap: var(--s2);
  align-items: baseline;
  margin: var(--s3) 0 0 0;
}

/* the footer's second row: the five legal pages, on every page of the site */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  font-size: 0.9em;
}

/* The dynamic pages have no sidebar and no outline. site.css gives .layout a
   sidebar column from 900px and an outline column from 1200px (the docs pages
   fill them); here they would leave the content in the narrow first column,
   which is what the owner saw at 1000px. One column at every width, and the
   reading measure widened for the pages that carry a table or a form. */
.layout--app { grid-template-columns: minmax(0, 1fr); }
.layout--app > .content { max-width: 72rem; }
.layout--app > .content table { width: 100%; }
@media (min-width: 900px) {
  .layout--app { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .layout--app { grid-template-columns: minmax(0, 1fr); }
}

/* moderation, seen from the outside (docs/spec-M47.md § 15.1): a package the
   administrator disabled says so at the top of its own page, and a version
   under a security advisory says so in its row. Both are the surface's own
   words plus a value out of a column, escaped by tmpl.mc; the colours are the
   site's tokens, so the contrast floor is checked by the same script. */
.notice {
  margin: var(--s4) 0;
  padding: var(--s3);
  background: var(--surface);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius);
}

.advisory {
  color: var(--text);
  font-weight: 600;
}