/* What it is on phones (below 660px): the drawing, compacted, is pinned at the top of the screen
   while the facts of each part scroll beneath it as plain text, in drawing order. While the facts
   are read the site header slides up out of the way and comes back when the reader scrolls up or
   the facts end (what-m.js). The part whose facts are being read is marked on the drawing. Tap a
   part to go to its facts; every part is a target of at least 24 by 24 px.
   The drawing keeps the wide drawing's language: oblique housings, dash-dot assembly lines with
   pins and holes, the stage rail across the Pipeline's face, jacks along the Knowledge model's top
   edge, Security as a band under the model's modules, and Storage as a plinth holding its two
   backends. Ink and greys only.
   Draft C: a module an LLM agent works in carries a small ink tag plate at the right end of its
   cell on the drawing, and an "agent" tag beside its heading in the facts; the ports row is
   "For agents", its facts under the pinout.
   Nothing here applies at 660px and above: tablets have the HTML stack, desktops the wide drawing. */

.wam { display: none; }

@media (max-width: 659px) {
  .wa-fig > .sr { display: none; } /* the same facts are visible below, as text */

  .wam {
    display: block;
    max-width: 460px;
    --wam-k: #a3a29d;                 /* housing outline (opaque, so overlapping edges stay even) */
    --wam-cell-k: rgba(28, 28, 26, 0.2);
    --wam-hair: rgba(28, 28, 26, 0.12);
    --wam-lead: rgba(28, 28, 26, 0.36);
    --wam-rail: #6c6b66;
    --row: 20px;                      /* module cell height; with the gap a row of cells is 24px, */
    --gap: 4px;                       /* the smallest tap target, so this is the shortest drawing */
    --pad: clamp(4px, 0.7vh, 6px);
    --mg: clamp(8px, 1.2vh, 10px);    /* assembly gap between housings */
    --fs: clamp(11px, 3vw, 12px);     /* labels on the drawing */
    --dx: 9px; --dy: 6px;             /* oblique depth (the angles below assume dx:dy = 3:2) */
    --wam-pin-h: 352px;               /* measured by what-m.js; these two are for anchors without script */
    --wam-land: calc(var(--wam-pin-h) + 14px);
  }

  /* ---------- the pinned drawing ---------- */
  .wam-pin {
    position: sticky;
    top: var(--wam-top, 92px);        /* under the site header, or 0 while the header is away */
    z-index: 5;
    display: block;
    margin: 0 calc(-1 * var(--gutter));
    padding: 5px var(--gutter) 7px;
    transition: top 0.25s ease;       /* moves in step with the header */
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .wam-pin::after { /* the facts fade out as they pass under the drawing */
    content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 1px); height: 12px;
    background: linear-gradient(var(--bg) 25%, rgba(244, 243, 239, 0));
    pointer-events: none;
  }
  .wam-draw { position: relative; max-width: 440px; }
  .wam-pin a { color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .wam-pin a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  /* The site header slides up while the facts are read (what-m.js sets the class) */
  .head { transition: border-color 0.2s, transform 0.25s ease; }
  .head.wam-away { transform: translateY(-100%); }

  /* Tap targets: each part's hit area is at least 24px high without growing the drawing. A cell
     reaches half the gap above and below it (20px + 4px); a row of stations or jacks reaches up
     over its housing's padding and top edge. Neighbouring hit areas meet but never overlap. */
  .wam-c, .wam-ports { position: relative; }
  .wam-c::after, .wam-ports::after { content: ""; position: absolute; left: -1px; right: -1px; }
  .wam-c::after { top: calc(-1px - var(--gap) / 2); bottom: calc(-1px - var(--gap) / 2); }
  .wam-ports::after { top: -6px; bottom: -1px; }
  .wam-base .wam-c::after { top: -3px; bottom: -3px; }
  .wam-mount { pointer-events: none; }

  /* Housings: the front face is the element; the top and side faces are skewed pseudo-elements. */
  .wam-u { position: relative; display: block; background: #ecebe6; border: 1px solid var(--wam-k); margin-top: calc(var(--dy) + 1px); }
  .wam-u::before, .wam-u::after { content: ""; position: absolute; border: 1px solid var(--wam-k); pointer-events: none; }
  .wam-u::before { left: -1px; right: -1px; bottom: calc(100% + 1px); height: var(--dy); background: #f1f0ec; border-bottom: 0; transform-origin: 0 100%; transform: skewX(-56.31deg); }
  .wam-u::after { left: calc(100% + 1px); top: -1px; bottom: -1px; width: var(--dx); background: #e0dfd9; border-left: 0; transform-origin: 0 0; transform: skewY(-33.69deg); }

  .wam-pipe, .wam-model { padding: var(--pad); display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .wam-pipe { margin-left: 13px; margin-right: 26px; grid-template-areas: "ports ports" "grid grid" "plate plate"; }
  .wam-model { margin-left: 3px; margin-right: 16px; grid-template-areas: "ports ports" "grid grid" "band band" "plate plate"; }
  .wam-u > .wam-ports { grid-area: ports; } .wam-u > .wam-pgrid, .wam-u > .wam-cgrid { grid-area: grid; } .wam-u > .wam-band { grid-area: band; } .wam-u > .wam-plate { grid-area: plate; }
  .wam-base { --dx: 12px; --dy: 8px; margin-right: 13px; background: #e6e5e0; }
  .wam-base::before { background: #eeede8; }
  .wam-base::after { background: #d9d8d2; }

  /* Module cells */
  .wam-c {
    display: flex; align-items: center; min-width: 0; height: var(--row);
    padding: 0 7px; background: var(--screen); border: 1px solid var(--wam-cell-k); border-radius: 3px;
    font-size: var(--fs); font-weight: 600; line-height: 1; letter-spacing: -0.005em; white-space: nowrap;
  }

  /* The agent tag plate on the drawing (the facts below spell it out) */
  .wam-tag { flex: none; display: block; width: 11px; height: 7px; margin-left: auto; padding-left: 0; border-radius: 3.5px; background: var(--ink); }
  .wam-ag { gap: 6px; }
  .wam-c.on .wam-tag { background: var(--screen); }

  .wam-plate { margin: 4px 1px 0; font-size: 12.5px; font-weight: 600; line-height: 15px; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
  .wam-plate span { margin-left: 3px; font-size: 11px; font-weight: 400; letter-spacing: 0; color: #5f5e59; }

  /* Rows of stations and jacks along a housing's top edge, after their label */
  .wam-ports { display: flex; align-items: center; gap: 10px; margin: 0 1px; padding: 0 0 5px; border-bottom: 1px solid var(--wam-hair); }
  .wam-pl { flex: none; padding: 1px 4px; margin-left: -4px; border-radius: 2px; font-size: 11px; font-weight: 600; line-height: 14px; }

  /* Pipeline: the stage rail, then its modules in rail order */
  .wam-sts { flex: 1; display: flex; justify-content: space-between; align-items: center; padding: 2px 2px 2px 0;
    background: linear-gradient(var(--wam-rail), var(--wam-rail)) 4px 50% / calc(100% - 10px) 1px no-repeat; }
  .wam-st { position: relative; display: block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--screen); border: 1px solid var(--wam-rail); }
  .wam-st + .wam-st::before { content: ""; position: absolute; right: calc(100% + 1px); top: 50%; margin-top: -2.5px; border-left: 3.5px solid var(--wam-rail); border-top: 2.5px solid transparent; border-bottom: 2.5px solid transparent; }
  .wam-pgrid {
    display: grid; gap: var(--gap) 5px; margin-top: 6px;
    grid-template-columns: repeat(2, minmax(max-content, 1fr));
    grid-template-rows: repeat(2, var(--row));
    grid-auto-flow: column;
  }

  /* Assembly: dash-dot lines from the pins under a housing to the holes in the one below */
  .wam-mount { position: relative; z-index: 1; height: var(--mg); margin: 0 26px 0 13px; }
  .wam-mount-b { margin: 0 16px 0 3px; --hdy: 8px; }
  .wam-cl {
    position: absolute; top: 0; width: 1px;
    height: calc(var(--mg) + var(--hdy, 6px) * 0.7 + 1px);
    padding: 7px 0 2px; background-clip: content-box;
    background-image: repeating-linear-gradient(to bottom, rgba(28, 28, 26, 0.4) 0 9px, transparent 9px 12px, rgba(28, 28, 26, 0.4) 12px 13.5px, transparent 13.5px 16.5px);
  }
  .wam-cl:first-child { left: 12px; }
  .wam-cl:last-child { right: 6px; }
  .wam-cl::before { content: ""; position: absolute; left: -0.5px; top: 0; width: 2px; height: 6px; border-radius: 0 0 1px 1px; background: #3a3a37; }
  .wam-cl::after { content: ""; position: absolute; left: -2px; bottom: -1.2px; width: 5px; height: 2.4px; border-radius: 50%; background: #3a3a37; }

  /* Knowledge model: interfaces as jacks along the top edge, evidence modules on the left and
     knowledge modules on the right (both columns the same height), Security as a band under them */
  .wam-jacks { flex: 1; display: flex; justify-content: space-between; align-items: center; padding: 2px 2px 2px 0; }
  .wam-jack { position: relative; display: block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--screen); border: 1px solid rgba(28, 28, 26, 0.5); }
  .wam-jack::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #3a3a37; }
  .wam-cgrid { display: grid; gap: 0 5px; margin-top: 6px; grid-template-columns: repeat(2, minmax(max-content, 1fr)); }
  .wam-col { display: flex; flex-direction: column; gap: var(--gap); height: calc(4 * var(--row) + 3 * var(--gap)); }
  .wam-col .wam-c { flex: 1 1 0; height: auto; }
  .wam-band { margin-top: var(--gap); gap: 10px; border-color: rgba(28, 28, 26, 0.5); }
  .wam-comp { flex: 1; display: flex; align-self: stretch; margin: 4px 0; }
  .wam-comp i { flex: 1; border-left: 1px solid var(--wam-hair); }

  /* Storage: the plinth, its name and its two backends */
  .wam-base { display: flex; align-items: center; gap: 5px; padding: 3px 7px 3px 6px; }
  .wam-bn { flex: none; padding: 0 5px 0 1px; font-size: 12.5px; font-weight: 600; line-height: 15px; letter-spacing: -0.01em; color: var(--ink); }
  .wam-base .wam-c { flex: 1 1 0; }

  /* The part being read: its cell turns to ink */
  .wam-c, .wam-pl, .wam-jack, .wam-jack::after, .wam-st { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
  .wam-c.on { background: var(--ink); border-color: var(--ink); color: var(--screen); }
  .wam-c.on .wam-comp i { border-left-color: rgba(250, 250, 247, 0.28); }
  .wam-ports.on .wam-pl { background: var(--ink); color: var(--screen); }
  .wam-ports.on .wam-jack { background: var(--ink); border-color: var(--ink); }
  .wam-ports.on .wam-jack::after { background: var(--screen); }
  .wam-rail.on { --wam-rail: var(--ink); }
  .wam-rail.on .wam-st { background: var(--ink); }

  /* ---------- the facts ---------- */
  .wam-facts { padding-top: 4px; }
  .wam-lh { --lh-pt: 26px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; padding: var(--lh-pt) 0 4px; font-size: 16px; font-weight: 600; line-height: 22px; letter-spacing: -0.01em; color: var(--ink); }
  .wam-lh span { font-size: 15px; font-weight: 400; letter-spacing: 0; color: #5f5e59; }
  .wam-layer:first-child .wam-lh { --lh-pt: 18px; }

  /* Landing: a heading reached from the drawing (or an anchor) sits 14px under the pinned drawing.
     --wam-land is set by what-m.js from the drawing's measured height, net of the page's own
     scroll-padding for the header. A part that begins its layer lands on the layer's heading. */
  .wam-b h4 { scroll-margin-top: var(--wam-land); }
  .wam-b { scroll-margin-top: calc(var(--wam-land) - 9px); }
  .wam-lh { scroll-margin-top: calc(var(--wam-land) - var(--lh-pt)); }

  /* A block reads like a callout on the drawing: a dot on the part, a leader, a bracket beside the facts */
  .wam-b { position: relative; padding: 9px 0 11px 24px; outline: none; }
  .wam-b::before { content: ""; position: absolute; left: 14px; top: 12px; bottom: 12px; width: 1px; background: var(--wam-lead); }
  .wam-b::after {
    content: ""; position: absolute; left: 0; top: 17.5px; width: 15px; height: 5px;
    background: radial-gradient(circle 2.2px at 2.5px 2.5px, var(--ink) 95%, transparent) no-repeat,
      linear-gradient(var(--wam-lead), var(--wam-lead)) 4px 2px / 11px 1px no-repeat;
  }
  .wam-b.on { --wam-lead: var(--ink); }
  .wam-b:focus-visible h4 { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }
  .wam-b h4 { width: fit-content; font-size: 15px; font-weight: 600; line-height: 22px; letter-spacing: -0.005em; color: var(--ink); }
  .wam-f { list-style: none; }
  .wam-f li { font-size: 15px; line-height: 21px; color: var(--ink-2); text-wrap: pretty; }
  .wam-f li + li { margin-top: 5px; } /* more room between facts than between the lines of one */
  h4 + .wam-f { margin-top: 1px; }
  .wam-tagw { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 9px; vertical-align: 1px; background: var(--ink); color: var(--screen); font-size: 11px; font-weight: 600; line-height: 17px; letter-spacing: 0.1px; }
  .wam-pinout + .wam-f { margin-top: 10px; }

  /* the stage rail, standing upright: stations joined by arrows, a stage beside each */
  .wam-railv { position: relative; list-style: none; margin-top: 4px; }
  .wam-railv::before { content: ""; position: absolute; left: 8px; top: 13px; bottom: 13px; border-left: 1px solid var(--wam-rail); }
  .wam-railv li { position: relative; padding: 3px 0 3px 26px; font-size: 15px; font-weight: 500; line-height: 20px; color: var(--ink-2); }
  .wam-railv li::before { content: ""; position: absolute; z-index: 1; left: 3px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border: 1px solid var(--wam-rail); border-radius: 50%; background: var(--bg); box-sizing: border-box; }
  .wam-railv li + li::after { content: ""; position: absolute; left: 5.5px; top: 2.5px; border-top: 4px solid var(--wam-rail); border-left: 3px solid transparent; border-right: 3px solid transparent; }

  /* the interfaces as a pinout */
  .wam-pinout { list-style: none; margin-top: 4px; }
  .wam-pinout li { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 21px; }
  .wam-pinout li + li { margin-top: 4px; }
  .wam-pinout b { min-width: 6.6em; font-weight: 600; color: var(--ink); }
  .wam-pinout span { color: #5f5e59; }

  /* the envelope's fields, as the compartments of the Security band */
  .wam-holds { list-style: none; display: flex; flex-wrap: wrap; overflow: hidden; margin: 6px 0 10px; max-width: 340px; background: var(--screen); border: 1px solid var(--wam-cell-k); border-radius: 3px; }
  .wam-holds li { flex: 1 0 auto; margin: -1px 0 0 -1px; padding: 5px 10px; border-left: 1px solid var(--wam-hair); border-top: 1px solid var(--wam-hair); text-align: center; font-size: 15px; line-height: 20px; color: var(--ink-2); }
}

/* The narrowest phones: the drawing takes a little of the page margin so its labels stay at 11px */
@media (max-width: 359px) {
  .wam-pin { padding-left: 10px; padding-right: 10px; }
  .wam-c { padding: 0 6px; }
  /* room for the agent tags in the Pipeline's two columns: a smaller plate, and the Pipeline set
     in a little less from the model's right edge (its assembly lines follow) */
  .wam-tag { width: 8px; height: 6px; border-radius: 3px; }
  .wam-ag { gap: 4px; }
  .wam-pipe { margin-right: 16px; }
  .wam-mount:not(.wam-mount-b) { margin-right: 16px; }
}

/* Shorter phones: tighter housings, and each nameplate moves up into its housing's row of
   stations or jacks, before the row's label, so the pinned drawing stays near 40% of the screen
   (rows of cells keep their 24px) */
@media (max-width: 659px) and (max-height: 799px) {
  .wam { --pad: 4px; --mg: 7px; --wam-pin-h: 300px; }
  .wam-pin { padding-top: 4px; padding-bottom: 6px; }
  .wam-pipe { grid-template-areas: "plate ports" "grid grid"; }
  .wam-model { grid-template-areas: "plate ports" "grid grid" "band band"; }
  .wam-u > .wam-plate { margin: 0; padding: 0 12px 4px 1px; border-bottom: 1px solid var(--wam-hair); align-self: stretch; display: flex; align-items: center; }
  .wam-u > .wam-plate span { display: none; }
  .wam-u > .wam-ports { margin-left: 0; padding-bottom: 4px; gap: 8px; }
  .wam-pl { padding-top: 0; padding-bottom: 0; } /* the row stays as high as the stations */
  .wam-pgrid, .wam-cgrid { margin-top: 4px; }
}
@media (max-width: 359px) and (max-height: 799px) {
  .wam-jack { width: 9px; height: 9px; } /* room between the jacks beside both names */
  .wam-jack::after { inset: 1.5px; }
  .wam-u > .wam-plate { padding-right: 9px; }
}
@media (max-width: 659px) and (max-height: 600px) {
  .wam { --pad: 3px; --mg: 5px; --wam-pin-h: 288px; }
  .wam-pin { padding-top: 3px; padding-bottom: 5px; }
}

/* Short screens (landscape): pinning would leave no room to read, so the drawing scrolls away */
@media (max-width: 659px) and (max-height: 520px) {
  .wam-pin { position: relative; top: 0; }
}

/* Reduced motion: the header and the drawing change place at once, and marks change without fading */
@media (max-width: 659px) and (prefers-reduced-motion: reduce) {
  .head, .wam-pin { transition: none; }
  .wam-c, .wam-pl, .wam-jack, .wam-jack::after, .wam-st { transition: none; }
}