/* MaeVae: the AI vendors page. Loaded after /styles.css, which holds the
   site's tokens, header, footer, grounds, tiers and the layouts every
   section uses (the reading row, the chapter, the columns), and the
   agents' names on hairlines. /mock.css draws the window of the dark band.

   The page's center is the vendor statement. It stands on the night
   ground at the top, where the home page stands its drawn window: three
   sentences, one to a row between hairlines, set larger than anything
   else on the page, the page's name included. Under it come the four
   statements between you and each vendor, so the page says where it
   stands before it goes into detail, then the agents' names, then the
   one dense part of the page, the agents side by side in a table at the
   content width, then the drawn window that shows three of them at work,
   and the quiet rows. Amber appears only inside the
   drawing, where /mock.css gives it its meaning; the table itself uses
   none. */

/* The opening: the page's name and the lead side by side on wide
   screens, as the home page's hero sets them, then the statement under
   them. The section's padding is its tier, set in the markup. */
.vendors-intro {
  display: grid;
  gap: var(--s5);
}

/* The page's name is set below the statement's size: the statement is
   what the page has to say, the name only says where you are. */
.vendors-intro h1 {
  max-width: 14ch;
  font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);      /* 30 to 44px */
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -0.025em;
}

@media (min-width: 1024px) {
  .vendors-intro {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--split-gap);
    align-items: end;
  }
}

/* The statement is one paragraph, so it is read aloud as one statement,
   with each of its three sentences on a row of its own. The rows run the
   full content width and the sentences wrap in balanced lines, so no row
   ends on a single word. The outer hairlines are the stronger line, the
   one between rows the quieter. */
.vendor-statement {
  max-width: none;
  margin-top: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--night-line-strong);
}

.vendor-statement > span {
  display: block;
  padding-block: clamp(20px, 2.2vw, 32px);
  border-bottom: 1px solid var(--night-line);
  color: var(--night-ink);
  font-size: clamp(2.125rem, 1.2rem + 3.4vw, 3.75rem);     /* 34 to 60px */
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.vendor-statement > span:last-child {
  border-bottom-color: var(--night-line-strong);
}

/* The caption names the table for screen readers; the heading above it
   already names it on screen */
.av-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* What each agent reports: a table at the content width on paper, the
   header row on the strip ground, hairlines between the rows, and the
   figures of the HUD column in monospace, the way the app's strip sets
   them. On a narrower screen each agent becomes a block with its name on
   top and the four answers under it, two to a line on a tablet, one on a
   phone; every answer then carries its column's name above it. The ARIA
   roles on the table keep it a table for screen readers when its display
   changes. */
.agents {
  width: 100%;
  border-collapse: collapse;
  color: var(--quiet);
  font-size: var(--fs-meta);
  line-height: 1.55;
}

.agents th,
.agents td {
  padding: var(--s4) var(--s5) var(--s4) 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.agents thead th {
  padding-block: var(--s3);
  border-bottom-color: var(--line-strong);
  background: var(--strip);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-tag);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.agents tbody th {
  color: var(--ink);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.35;
}

/* "Yes" in ink, so the three agents Restricted mode covers read at a
   glance down the last column; "No" stays quiet */
.agents .av-yes {
  color: var(--ink);
  font-weight: 600;
}

.agents code {
  padding: 0 0.3em;
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  background: var(--white);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.94em;
  white-space: nowrap;
}

/* The figures an agent reports, as a line of their own in monospace at
   the head of the cell; a figure it does not report is set in the quiet
   ink, as the app grays it */
.av-figs {
  display: block;
  margin-bottom: var(--s2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-tag);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.av-na {
  display: inline-block;
  color: var(--quiet);
}

.av-figs > .av-na:not(:first-child) {
  margin-left: 1ch;
}

/* A column's name above each answer, only where the rows are blocks */
.av-k {
  display: none;
}

@media (min-width: 1024px) {
  /* The strip ground of the header row reaches past the first and last
     words, so the outer cells keep 16px inside it */
  .agents th:first-child,
  .agents td:first-child {
    padding-left: var(--s4);
  }

  .agents th:last-child,
  .agents td:last-child {
    padding-right: var(--s4);
  }

  .agents thead th:nth-child(1) { width: 12%; }
  .agents thead th:nth-child(2) { width: 22%; }
  .agents thead th:nth-child(3) { width: 32%; }
  .agents thead th:nth-child(4) { width: 24%; }
  .agents thead th:nth-child(5) { width: 10%; }
}

@media (max-width: 1023.98px) {
  .agents,
  .agents tbody,
  .agents tr,
  .agents th,
  .agents td {
    display: block;
  }

  /* The header row stays for screen readers and leaves the screen */
  .agents thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .agents {
    border-top: 1px solid var(--line-strong);
  }

  .agents tbody tr {
    display: grid;
    gap: var(--s4) var(--s6);
    padding-block: var(--s5);
    border-bottom: 1px solid var(--line-strong);
  }

  .agents tbody th,
  .agents tbody td {
    padding: 0;
    border-bottom: 0;
  }

  .av-k {
    display: block;
    margin-bottom: var(--s1);
    color: var(--ink);
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1.4;
  }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  .agents tbody tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agents tbody th {
    grid-column: 1 / -1;
  }
}

.agents-limit {
  max-width: 70ch;
  margin-top: var(--s5);
}

/* The drawn window under the band's heading row, at the content width:
   48px under the row, as a text stands from its drawing everywhere on the
   site */
.av-show-art {
  margin-top: var(--pair-gap);
}

/* Between you and each vendor: four short statements of equal weight, so
   four columns from 1100px and two on a tablet, 32px under their
   heading, which keeps the site's heading measure */
.av-between h2 {
  max-width: var(--measure-heading);
}

.av-between h2 + .cols {
  margin-top: var(--s6);
}

.av-between .cols p {
  max-width: var(--measure);
  color: var(--quiet);
}

/* A lead keeps the lead's measure inside the reading row, where the
   shared rule for the row's paragraphs would widen it to the prose
   measure */
.reading-body > .lead {
  max-width: var(--measure-lead);
}

/* A line that points into the guide, under the text it belongs to */
.av-link {
  font-size: var(--fs-meta);
  line-height: 1.55;
}

@media (forced-colors: active) {
  .agents code,
  .agents th,
  .agents td {
    border-color: CanvasText;
  }
}