/* 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 concept A's language: oblique housings, dash-dot assembly lines with pins
   and holes, jacks along Core's top edge, the console face, Realms as a band under Core's
   modules, and the formal core as a plinth with its state machine. Ink and greys only.
   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);
    --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: 336px;               /* 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); the row of jacks reaches up over Core'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-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-meta { margin-left: 13px; margin-right: 26px; padding: var(--pad); }
  .wam-core { margin-left: 3px; margin-right: 16px; padding: var(--pad); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ports ports" "grid grid" "realm realm" "plate plate"; }
  .wam-core > .wam-ports { grid-area: ports; } .wam-core > .wam-cgrid { grid-area: grid; } .wam-core > .wam-realm { grid-area: realm; } .wam-core > .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;
  }

  /* Meta: Memory and Policy, the console face, Operations and Gateway */
  .wam-mgrid {
    display: grid; gap: var(--gap) 5px;
    grid-template-columns: minmax(max-content, 1fr) minmax(0, 1.5fr) minmax(max-content, 1fr);
    grid-template-rows: var(--row) var(--row);
    grid-template-areas: "l1 scr r1" "l2 scr r2";
  }
  .wam-l1 { grid-area: l1; } .wam-l2 { grid-area: l2; } .wam-r1 { grid-area: r1; } .wam-r2 { grid-area: r2; }
  .wam-scr { grid-area: scr; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--screen); border: 1px solid var(--wam-cell-k); border-radius: 4px; }
  .wam-scr .wam-cap { display: block; padding: 2px 6px 1px; border-bottom: 1px solid var(--wam-hair); font-size: 11px; font-weight: 600; line-height: 13px; letter-spacing: 0.09em; text-transform: uppercase; color: #5f5e59; }
  .wam-topo { flex: 1 1 0; min-height: 0; width: 100%; height: 100%; }
  .wam-topo .te { fill: none; stroke: rgba(28, 28, 26, 0.3); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .wam-topo .tn { fill: var(--ink-2); }
  .wam-topo .tn.hub { fill: var(--screen); stroke: var(--ink-2); stroke-width: 1.1; vector-effect: non-scaling-stroke; }

  .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; }

  /* 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; }

  /* Core: the surfaces as jacks along the top edge, the modules, Realms as a band under them */
  .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; }
  .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: var(--gap) 5px; margin-top: 6px;
    grid-template-columns: repeat(2, minmax(max-content, 1fr));
    grid-template-rows: repeat(4, var(--row));
    grid-auto-flow: column;
  }
  .wam-realm { margin-top: var(--gap); gap: 10px; }
  .wam-comp { flex: 1; display: flex; align-self: stretch; margin: 4px 0; }
  .wam-comp i { flex: 1; border-left: 1px solid var(--wam-hair); }

  /* Formal core: the plinth, its name and a lifecycle drawn as a state machine */
  .wam-base { display: flex; align-items: center; justify-content: space-between; height: calc(var(--row) + 5px); padding: 0 8px 0 7px; }
  .wam-base b { padding: 1px 3px; border-radius: 2px; font-size: 12.5px; font-weight: 600; line-height: 15px; letter-spacing: -0.01em; }
  .wam-chain { flex: none; margin-top: -3px; }
  .wam-chain path, .wam-chain circle { fill: none; stroke: #6c6b66; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
  .wam-chain circle.end { fill: #6c6b66; stroke: none; }

  /* The part being read: its cell turns to ink */
  .wam-c, .wam-scr, .wam-scr .wam-cap, .wam-pl, .wam-jack, .wam-jack::after, .wam-base b { 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-scr.on { border-color: var(--ink); }
  .wam-scr.on .wam-cap { background: var(--ink); color: var(--screen); border-bottom-color: var(--ink); }
  .wam-ports.on .wam-pl, .wam-base.on b { 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-base.on .wam-chain path, .wam-base.on .wam-chain circle { stroke: var(--ink); }
  .wam-base.on .wam-chain circle.end { fill: 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 h4 { 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 */
  .wam-b > .wam-f:first-child li:first-child { line-height: 22px; }
  h4 + .wam-f { margin-top: 1px; }

  /* the console face, with its views */
  .wam-face { margin-top: 6px; max-width: 300px; background: var(--screen); border: 1px solid var(--wam-cell-k); border-radius: 4px; }
  .wam-face .wam-cap { padding: 7px 10px 6px; border-bottom: 1px solid var(--wam-hair); font-size: 11px; font-weight: 600; line-height: 13px; letter-spacing: 0.09em; text-transform: uppercase; color: #5f5e59; }
  .wam-views { list-style: none; display: grid; grid-template-columns: max-content minmax(max-content, 1fr); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 10px; padding: 5px 4px 6px; }
  .wam-views li { padding: 4px 6px; border-radius: 2px; white-space: nowrap; font-size: 15px; font-weight: 500; line-height: 20px; color: var(--ink-2); }
  .wam-views li.sel { background: rgba(28, 28, 26, 0.06); color: var(--ink); }

  /* the surfaces 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: 5.7em; font-weight: 600; color: var(--ink); }
  .wam-pinout span { color: #5f5e59; }

  /* what a realm holds, as the compartments of its 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; }
}

/* Shorter phones: tighter housings, and Core's nameplate moves up into the row of jacks, before
   the Surfaces 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: 292px; }
  .wam-pin { padding-top: 4px; padding-bottom: 6px; }
  .wam-core { grid-template-areas: "plate ports" "grid grid" "realm realm"; }
  .wam-core > .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-core > .wam-plate span, .wam-meta .wam-plate span { display: none; }
  .wam-core > .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 jacks */
  .wam-plate { margin-top: 4px; line-height: 13px; }
  .wam-cgrid { margin-top: 4px; }
  .wam-base { height: calc(var(--row) + 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; }
}
@media (max-width: 659px) and (max-height: 600px) {
  .wam { --pad: 3px; --mg: 5px; --wam-pin-h: 280px; }
  .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-scr, .wam-scr .wam-cap, .wam-pl, .wam-jack, .wam-jack::after, .wam-base b { transition: none; }
}