/* enterprise.atmon.ai: the overlay on the site stylesheet.
 *
 * The enterprise site is the same visual system as atmon.ai (the site design
 * book, docs/design/site-design-book.md): warm speckled paper, one terracotta
 * voice, the socket-ring mark, the workshop line art, the editorial furniture.
 * It loads assets/site.css first and this file second, so everything here is
 * additive and nothing here restates a rule that file already carries.
 *
 * Two things are additive, and there are only two:
 *
 *   1. The ENTERPRISE variant of the wordmark. The product name is unchanged
 *      and nothing hangs off it; the audience label sits beside it behind a
 *      hairline, in the label style the book's type table already defines.
 *
 *   2. The deployment diagrams. This site has to draw what runs where, and a
 *      boundary diagram carries labels, which the illustration program does
 *      not: an illustration file on this system holds no text at all. So the
 *      diagrams are inline SVG in the page, drawn in the same three colors and
 *      the same single stroke weight, with their words as real text in the
 *      document rather than baked into a picture.
 *
 * Every color below is a token from site.css. enterprise/design_test.go
 * recomputes each pair this file ships from those values and fails on a
 * literal, so a new color cannot reach this surface without the contrast being
 * redone.
 */

/* ---------- the ENTERPRISE wordmark variant ---------- */

.wordmark-enterprise {
  align-self: center;
  padding-left: 12px;
  margin-left: 2px;
  border-left: 1px solid var(--rust-500);
  color: var(--rust-700);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1;
  text-transform: uppercase;
}

/* On the footer's ink block the label takes the paper colourway, the way the
 * wordmark's own halves do. */
.footer-lockup .wordmark-enterprise {
  border-left-color: var(--paper-50);
  color: var(--paper-50);
}

/* ---------- the deployment diagrams ---------- */

/* A diagram is a figure: the drawing, then one line of caption under it. It
 * sits on a raised panel with a hairline, which is the card treatment, because
 * a boundary drawing on the page ground has no edge of its own. */
.diagram {
  margin: 0 0 26px;
  padding: 24px 20px 18px;
  background: var(--paper-100);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  /* A boundary drawing has a width below which its labels stop being
   * readable, the same problem a table has and answered the same way: the
   * figure scrolls inside itself rather than the page scrolling sideways. */
  overflow-x: auto;
}

.diagram svg {
  display: block;
  width: 100%;
  min-width: 860px;
  height: auto;
}

.diagram figcaption {
  margin: 16px 4px 0;
  color: var(--rust-700);
  font-size: 14px;
}

/* The perimeter: the boundary of what is the reader's alone, dashed, in the
 * voice color. On the three customer-machine models it sits around their own
 * network; on the hosted model it sits around the node we run for them, which
 * is the thing that offer sells. */
.dg-zone {
  fill: none;
  stroke: var(--rust-500);
  stroke-width: 2;
  stroke-dasharray: 11 8;
  stroke-linecap: round;
}

/* A box is a thing that runs. Paper fill on the panel ground, ink outline, the
 * single stroke weight the illustration program uses. */
.dg-box {
  fill: var(--paper-50);
  stroke: var(--ink);
  stroke-width: 2.5;
}

/* The one box on these drawings that is not the reader's: us. Pressed paper,
 * so it reads as outside the boundary before a word is read. */
.dg-box-theirs {
  fill: var(--paper-200);
  stroke: var(--ink);
  stroke-width: 2.5;
}

.dg-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.dg-line-accent {
  fill: none;
  stroke: var(--rust-500);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.dg-head {
  fill: var(--ink);
}

.dg-head-accent {
  fill: var(--rust-500);
}

.dg-label {
  fill: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
}

.dg-sub {
  fill: var(--rust-700);
  font-family: var(--font-body);
  font-size: 12.5px;
}

.dg-zone-label,
.dg-note {
  fill: var(--rust-700);
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- the two promise lists ---------- */

/* The site's two strongest claims, one per offer, sit back to back on the
 * security page. They get the widest key column the walk list has, because each
 * key is a category of data rather than a one-word label, and they take it
 * together so the two lists line up as one comparison rather than as two
 * differently ruled tables. */
.never-see .walk-key,
.hosted-promises .walk-key {
  color: var(--ink);
}

@media (min-width: 760px) {
  .never-see li,
  .hosted-promises li {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  }
}