/* The brev architecture figure (app/views/brev/_architecture.html.erb).
 *
 * Three columns — the outside world, the mail engine, the interfaces — with an arrow track between
 * each pair. It is a grid of boxes and not a drawing: every arrow gets a cell of its own, so it
 * centres itself between the two boxes it joins and no coordinate is tuned by hand, the way
 * .c-pipeline__grid draws Gantry's ring. Every label is real text at the page's own type size,
 * which is the whole reason this is not an SVG: an SVG scales its coordinate space, so its type
 * shrinks with the column and the figure has to scroll sideways instead of reflowing.
 *
 * No colour is named here. Every one resolves through a role, so 02-brands/_brev.css tints the
 * figure by re-pointing --accent and nothing in this file changes.
 */
.c-archfig__grid {
  display: grid;
  grid-template-columns:
    minmax(0, 0.85fr)   /* the outside world */
    auto                /* crossing the boundary */
    minmax(0, 1.15fr)   /* the mail engine */
    auto                /* the read edge */
    minmax(0, 1fr);     /* the interfaces */
  column-gap: var(--space-sm);
  grid-template-areas:
    "h-outside  .        h-engine  .        h-interfaces"
    "providers  .        archive   e-read   api"
    "providers  .        e-write   .        e-serve"
    "providers  x-cross  daemon    .        consumers"
    "providers  .        e-queue   .        consumers"
    "providers  .        overlay   e-state  consumers";
}

/* ── the column headings ────────────────────────────────────────────────────────────────── */

/* Set the way the page sets a section title — small, upper, tracked — so the three columns are
   named without a second type size entering the figure. */
.c-archfig__colhead {
  margin: 0 0 var(--space-xs);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.c-archfig__colhead--outside    { grid-area: h-outside; }
.c-archfig__colhead--engine     { grid-area: h-engine; }
.c-archfig__colhead--interfaces { grid-area: h-interfaces; }

/* ── the nodes ──────────────────────────────────────────────────────────────────────────── */

.c-archfig__node {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-sm) var(--space-md);
  border: var(--bw) solid var(--line);
  background: var(--surface-raised);
  min-width: 0;
}
.c-archfig__name { color: var(--text-bright); font-weight: var(--fw-medium); }
/* The one node whose name is a command carries it in a <code>, which the element layer gives a
   ground and a padding this box does not want. */
.c-archfig__name code { font: inherit; background: none; padding: 0; color: inherit; }
.c-archfig__path { color: var(--accent); font-size: var(--text-xs); overflow-wrap: anywhere; }
.c-archfig__detail { color: var(--text-dim); font-size: var(--text-xs); }
/* A wire protocol is a name, not a description, so it is set like a path and not like a detail. */
.c-archfig__proto { color: var(--text-muted); font-size: var(--text-xs); }

/* The archive is the primary copy and the figure's subject; it is the one node drawn in the accent. */
.c-archfig__node--archive { border-color: var(--accent); }

/* One box per kind of account, the pair centred against the column it faces rather than stretched
   down the figure. */
.c-archfig__providers {
  grid-area: providers;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.c-archfig__node--archive   { grid-area: archive; }
.c-archfig__node--daemon    { grid-area: daemon; }
.c-archfig__node--overlay   { grid-area: overlay; }
.c-archfig__node--api       { grid-area: api; }

/* The client and the agents are the two consumers of that one contract, so they share a cell
   rather than each taking a column of their own. */
.c-archfig__consumers {
  grid-area: consumers;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  /* The agents hug the CLI box above them and the client sits level with the overlay it writes, so
     each of the two arrows that touch this block meets the box it actually names. */
  justify-content: space-between;
}

/* ── the edges ──────────────────────────────────────────────────────────────────────────── */

/* An edge is an arrowhead, a stem drawn as a border on a pseudo-element, and a label. The stem is
   what makes the figure read as a diagram rather than as glyphs floating between boxes, and it is
   a border rather than a box-drawing character so it meets the box it points at exactly. */
.c-archfig__edge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  color: var(--text-dim);
  font-size: var(--text-xs);
  text-align: center;
}
.c-archfig__glyph { position: relative; line-height: 1; }
.c-archfig__glyph::before {
  content: "";
  position: absolute;
  border-color: currentColor;
  border-style: solid;
  border-width: 0;
}
.c-archfig__label { color: var(--text-muted); }

/* The stem grows out of the arrowhead away from the direction of travel, so it spans the gap the
   arrow crosses, and each direction gets the padding that gap needs on its own side. */
.c-archfig__edge--down { padding-block: var(--space-lg) var(--space-xs); }
.c-archfig__edge--down .c-archfig__glyph::before,
.c-archfig__glyph--down::before {
  inset-inline-start: 50%; inset-block-end: 100%; block-size: var(--space-lg); border-inline-start-width: var(--bw);
}
.c-archfig__edge--up { flex-direction: column-reverse; padding-block: var(--space-xs) var(--space-lg); }
.c-archfig__edge--up .c-archfig__glyph::before {
  inset-inline-start: 50%; inset-block-start: 100%; block-size: var(--space-lg); border-inline-start-width: var(--bw);
}
.c-archfig__edge--left { padding-inline: var(--space-xs) var(--space-lg); }
.c-archfig__edge--left .c-archfig__glyph::before,
.c-archfig__glyph--left::before {
  inset-block-start: 50%; inset-inline-start: 100%; inline-size: var(--space-lg); border-block-start-width: var(--bw);
}
.c-archfig__edge--right { padding-inline: var(--space-lg) var(--space-xs); }
.c-archfig__edge--right .c-archfig__glyph::before,
.c-archfig__glyph--right::before {
  inset-block-start: 50%; inset-inline-end: 100%; inline-size: var(--space-lg); border-block-start-width: var(--bw);
}

/* The boundary is crossed in both directions at the same place — mail arrives, the outbox leaves —
   so that one cell carries two legs instead of two cells carrying one arrow each. */
.c-archfig__edge--cross { grid-area: x-cross; gap: var(--space-md); padding-inline: var(--space-sm); }
/* Held to a measure so a long leg wraps inside its own track instead of running under the boundary. */
.c-archfig__edge--cross .c-archfig__label { max-inline-size: 16ch; }
.c-archfig__leg { display: flex; flex-direction: column; align-items: center; gap: var(--space-3xs); }
.c-archfig__leg .c-archfig__glyph--right { margin-inline-start: var(--space-lg); }
.c-archfig__leg .c-archfig__glyph--left { margin-inline-end: var(--space-lg); }

/* Two edges carry the claims the figure exists to make, and are the only ones tinted: the single
   arrowhead that writes the archive, and the single kind of edge anything else has to it. */
.c-archfig__edge--write { color: var(--accent); }
.c-archfig__edge--write .c-archfig__label { color: var(--accent); }
.c-archfig__edge--read { color: var(--good); }
.c-archfig__edge--read .c-archfig__label { color: var(--good); }

.c-archfig__edge--write { grid-area: e-write; }
.c-archfig__edge--queue { grid-area: e-queue; }
.c-archfig__edge--read  { grid-area: e-read; }
.c-archfig__edge--serve { grid-area: e-serve; }
.c-archfig__edge--state { grid-area: e-state; }

/* ── the machine boundary ───────────────────────────────────────────────────────────────── */

/* Placed by line number, not by an area name: it has to lie under the two columns it encloses and
   named areas cannot overlap. The label straddles the top border over a patch of the page's own
   ground, which is how .c-lanegrid draws its label and why no stretch of rule shows through it. */
.c-archfig__machine {
  grid-column: 3 / -1;
  grid-row: 1 / -1;
  z-index: 0;
  margin: calc(-1 * var(--space-md));
  border: var(--bw) dashed var(--line-strong);
  position: relative;
}
.c-archfig__node,
.c-archfig__consumers,
.c-archfig__edge,
.c-archfig__colhead { position: relative; z-index: 1; }
.c-archfig__machine-label {
  position: absolute;
  top: 0;
  left: var(--space-lg);
  transform: translateY(-50%);
  padding-inline: 1ch;
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

/* ── narrow ─────────────────────────────────────────────────────────────────────────────── */

/* Below the breakpoint the grid becomes one column, the same answer .c-pipeline gives: the figure
   reflows and never scrolls sideways. The two upward arrows keep their meaning exactly — each now
   points at the box immediately above it, which is the box it pointed at across the grid. */
@media (max-width: 56rem) {
  .c-archfig__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "h-outside" "providers" "x-cross"
      "h-engine" "archive" "e-write" "daemon" "e-queue" "overlay"
      "h-interfaces" "e-read" "api" "e-serve" "consumers" "e-state";
  }
  .c-archfig__colhead { margin-block-start: var(--space-lg); }
  .c-archfig__colhead--outside { margin-block-start: 0; }
  /* The enclosure would have to wrap a run of rows rather than a block of columns, which a border
     cannot do; the two headings inside it say where the reader's own machine begins. */
  .c-archfig__machine { display: none; }
  /* A quarter-turn clockwise points ▸ down the column and ◂ back up it. These lose their stems: in
     one column every arrow is vertical, and a stem on a turned arrow runs into the stem of the one
     after it so the pair reads as a single double-headed line. */
  .c-archfig__edge--left,
  .c-archfig__edge--right { padding: var(--space-xs) 0; }
  .c-archfig__edge--left .c-archfig__glyph,
  .c-archfig__edge--right .c-archfig__glyph { display: inline-block; transform: rotate(90deg); }
  .c-archfig__edge--left .c-archfig__glyph::before,
  .c-archfig__edge--right .c-archfig__glyph::before { content: none; }
  /* The crossing pair stacks, and its legs lose the offsets that set them apart horizontally. */
  .c-archfig__edge--cross { flex-direction: column; gap: var(--space-xs); padding: var(--space-xs) 0; }
  .c-archfig__leg .c-archfig__glyph--right,
  .c-archfig__leg .c-archfig__glyph--left { margin: 0; display: inline-block; transform: rotate(90deg); }
  .c-archfig__leg .c-archfig__glyph--right::before,
  .c-archfig__leg .c-archfig__glyph--left::before { content: none; }
}