/*
 * What makes her different: the scam picture section on Moderation (.scan), the home page's strip (.diff) and the /why/ page
 * (.why). Linked only by the pages that use it (a page module's `styles`), after site.css and motion.css.
 * Same poster rules as site.css: flat colour, the palette's custom properties only (on the page ground and its slips, the
 * colours named by their job, so the dark theme reaches these too), no gradients, glows, soft shadows or rounded corners.
 * Nothing here moves: hover colours are hard cuts, and the
 * scroll arrivals come from the generic selectors in js/motion.js (.block > .wrap > h2 and friends).
 */

/* ---------- moderation: the scam picture scan ---------- */

.scan h2 {
  font-size: var(--fs-2);
}

.scan-grid {
  display: grid;
  gap: 40px;
  margin-top: 40px;
}

/* One column: the subsections first, then the example table and the limits side by side under them, so neither column ends
   hundreds of pixels before the other. */
@media (min-width: 1000px) {
  .scan-side {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
}

.scan-facts {
  border-top: 4px solid var(--red);
}

.scan-fact {
  padding: 18px 0 14px;
  border-bottom: 4px solid var(--red);
}

.scan-fact h3 {
  margin-bottom: 8px;
  color: var(--gold);
  font-size: var(--fs-4);
}

.scan-fact p {
  max-width: 38em;
  margin: 0;
}

.scan-fact .fold {
  margin: 16px 0 4px;
}

/* A fold is a cream slip, so a command in it is drawn the way it is on paper, not the way .ink draws it. */
.scan .fold code {
  background: var(--ground-2);
  color: var(--text);
  border-color: var(--rule);
}

.scan-side {
  display: grid;
  gap: 28px;
}

/* A slip of paper on the black: the made-up lines and what the bot's own rule says about each. */
.scan-example {
  padding: 22px 22px 14px;
  background: var(--card);
  color: var(--text);
}

.scan-example h3 {
  margin-bottom: 12px;
}

.scan-example p {
  font-size: var(--fs-small);
}

.scan-example code {
  background: var(--ground-2);
  color: var(--text);
  border-color: var(--rule);
  white-space: nowrap;
}

.scan-example .table-wrap {
  margin: 14px 0 6px;
}

.scan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.scan-table th {
  padding: 8px 12px 6px 0;
  border-bottom: 4px solid var(--rule);
  font: 700 var(--fs-small)/1.2 var(--body);
  text-align: left;
}

.scan-table td {
  padding: 12px 12px 12px 0;
  border-bottom: 2px solid var(--rule);
  vertical-align: top;
}

.scan-table tr:last-child td {
  border-bottom: 0;
}

.scan-table q {
  font-weight: 700;
}

.scan-none {
  font-weight: 800;
  color: var(--quiet);
}

.scan-why {
  display: block;
  margin-top: 6px;
}

@media (min-width: 700px) {
  .scan-table td:first-child {
    width: 48%;
  }
}

/* On a phone two columns do not fit: each line becomes a card, and each cell says which column it was. */
@media (max-width: 699px) {
  .scan-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .scan-table,
  .scan-table tbody,
  .scan-table tr,
  .scan-table td {
    display: block;
  }

  .scan-table tr {
    padding: 12px 0 10px;
    border-bottom: 2px solid var(--rule);
  }

  .scan-table tr:last-child {
    border-bottom: 0;
  }

  .scan-table td {
    padding: 2px 0 6px;
    border: 0;
  }

  .scan-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--quiet);
    font: 700 var(--fs-tiny)/1.2 var(--body);
  }
}

/* The limits, on red: part of the pitch, not a footnote. */
.scan-limits {
  padding: 22px 22px 18px;
  background: var(--red);
  color: var(--cream);
}

.scan-limits h3 {
  margin-bottom: 12px;
}

.scan-limits ul {
  margin: 0 0 14px;
  padding-left: 1.2em;
}

.scan-limits li {
  margin-bottom: 7px;
}

.scan-limits p {
  margin: 0;
  font-weight: 800;
}

/* ---------- home: what makes her different ---------- */

/* One line of links, in the style of the Moderation page's "Jump to": the lead, then the /why/ titles, then the whole list. */
.diff {
  padding: 30px 0;
}

/* It flows as one sentence of text, wrapping where words wrap; each dot is glued to the link before it, so a wrapped line
   never starts with one. */
.diff-in {
  line-height: 1.9;
}

.diff-lead,
.diff-list,
.diff-list li {
  display: inline;
  margin: 0;
  padding: 0;
}

.diff-lead {
  font-weight: 800;
}

.diff-lead::after {
  content: ': ';
}

.diff-list {
  list-style: none;
  font-weight: 700;
}

.diff-list li:not(:last-child)::after {
  content: '\00a0\00b7';
  margin-right: 0.45em;
}

.diff-link,
.diff-all {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

/* ---------- /why/: the short list ---------- */

.why-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 4px solid var(--rule);
}

.why-item {
  display: grid;
  gap: 4px 26px;
  padding: 30px 0 22px;
  border-bottom: 4px solid var(--rule);
}

.why-body h2 {
  margin: 4px 0 14px;
  font-size: var(--fs-3);
}

.why-body p {
  max-width: 40em;
}

.why-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
}

.why-more {
  font-weight: 800;
}

.why-more::after {
  content: ' \2192';
}

/* The face sits on the header's bottom edge, as on the Chat page, instead of floating above it. */
@media (min-width: 900px) {
  .why-top .crest {
    margin-bottom: -56px;
  }
}

/* The page ends on one line with its links in it, not a second copy of the Chat page's closing band. */
.why-end {
  padding: 40px 0;
}

.why-end-line {
  max-width: 40em;
  margin: 0;
  font-size: var(--fs-lede);
  line-height: 1.45;
}