/* What it is: an exploded architecture drawing, in the manner of a service drawing.
   Meerkat Meta is lifted above Meerkat Core, Core above its formal core; dash-dot assembly lines
   show where each part mounts. Surfaces are ports along Core's top edge; Realms is a band under
   all of Core's modules; each module carries its facts on a leader line. From 1080px the drawing
   is one static SVG, generated with exact Inter metrics, with the same facts in a plain list for
   screen readers. On tablets (660px to 1079px) the same drawing is rebuilt in HTML so its text
   reflows (the second half of this file); phones have their own version (what-m.css). Between
   the two animated instruments around it the drawing stays still, light and monochrome. */

.wa-fig { margin: 0; }
.wa-draw { display: block; width: 100%; height: auto; overflow: visible; }

.wa-draw * { vector-effect: non-scaling-stroke; }
.wa-draw text { font-family: var(--sans); font-feature-settings: "ss01", "cv11"; font-optical-sizing: auto; fill: var(--ink-2); }
.wa-draw .t-cell, .wa-draw .t-plate, .wa-draw .t-port, .wa-draw .t-menu.on { fill: var(--ink); }
.wa-draw .t-role, .wa-draw .t-kind, .wa-draw .t-cap { fill: #5f5e59; }

/* The housings: a front face a little darker than the page, a lighter top, a darker side. */
.wa-draw .unit path, .wa-draw .unit rect { stroke: rgba(28, 28, 26, 0.38); stroke-width: 1; stroke-linejoin: round; }
.wa-draw .unit .f-front { fill: #ecebe6; }
.wa-draw .unit .f-top { fill: #f1f0ec; }
.wa-draw .unit .f-side { fill: #e0dfd9; }
.wa-draw .unit.base .f-front { fill: #e6e5e0; }
.wa-draw .unit.base .f-top { fill: #eeede8; }
.wa-draw .unit.base .f-side { fill: #d9d8d2; }
.wa-draw .cell, .wa-draw .scr { fill: var(--screen); stroke: rgba(28, 28, 26, 0.2); stroke-width: 1; }
.wa-draw .hair { fill: none; stroke: rgba(28, 28, 26, 0.12); stroke-width: 1; }
.wa-draw .sel { fill: rgba(28, 28, 26, 0.06); }
.wa-draw .jack { fill: var(--screen); stroke: rgba(28, 28, 26, 0.5); stroke-width: 1; }
.wa-draw .jack-in { fill: #3a3a37; }
.wa-draw .footprint { fill: none; stroke: rgba(28, 28, 26, 0.2); stroke-width: 1; }
.wa-draw .hole { fill: #3a3a37; }
.wa-draw .pin { stroke: #3a3a37; stroke-width: 2; stroke-linecap: round; }
.wa-draw .cline { fill: none; stroke: rgba(28, 28, 26, 0.38); stroke-width: 1; stroke-dasharray: 9 3 1.5 3; }
.wa-draw .chain path, .wa-draw .chain circle { fill: none; stroke: #6c6b66; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.wa-draw .chain circle.end { fill: #6c6b66; stroke: none; }
.wa-draw .topo .te { fill: none; stroke: rgba(28, 28, 26, 0.28); stroke-width: 1; }
.wa-draw .topo .tn { fill: var(--ink-2); }
.wa-draw .topo .tn.hub { fill: var(--screen); stroke: var(--ink-2); stroke-width: 1.2; }

/* Callouts: a leader from a dot on the part to a thin bracket beside its facts. */
.wa-draw .leader, .wa-draw .bracket { fill: none; stroke: var(--ink); stroke-opacity: 0.42; stroke-width: 1; }
.wa-draw .anchor { fill: var(--ink); }

/* Below 1080px the wide drawing would set its labels under 11px: the HTML versions take over. */
@media (max-width: 1079px) {
  .wa-wide { display: none; }
}

/* Type on the drawing (generated with the metrics used for its layout) */
.wa-draw .t-fact { font-weight: 400; font-size: 13px; letter-spacing: 0px; }
.wa-draw .t-cell { font-weight: 600; font-size: 13px; letter-spacing: -0.08px; }
.wa-draw .t-plate { font-weight: 600; font-size: 15px; letter-spacing: -0.25px; }
.wa-draw .t-role { font-weight: 400; font-size: 13px; letter-spacing: 0px; }
.wa-draw .t-port { font-weight: 600; font-size: 11px; letter-spacing: 0px; }
.wa-draw .t-kind { font-weight: 400; font-size: 11px; letter-spacing: 0px; }
.wa-draw .t-menu { font-weight: 500; font-size: 11px; letter-spacing: 0px; }
.wa-draw .t-cap { font-weight: 600; font-size: 11px; letter-spacing: 0.99px; }

/* Tablets (660px to 1079px): the same drawing rebuilt in HTML so its text reflows. Three housings
   stacked as in the drawing, Meta on top: the front face is a CSS box, the top and side faces are
   skewed pseudo-elements, and dash-dot assembly lines with pins join each housing to the one below.
   Core starts with its ports as a pinout. Each module is a cell with its facts beneath it on a
   leader, as real text. Every fact of the wide drawing is here. This is also the accessible
   version at these widths, so the plain list steps aside. The rules first build the stack; the
   tablet block after them gives it the proportions of the wide drawing. */

.wa-stack { display: none; }
@media (min-width: 660px) and (max-width: 1079px) {
  .wa-fig > .sr { display: none; }
  .wa-stack { display: block; }
}

.wa-stack {
  --edge: #a2a19e;                  /* the housing stroke, rgba(28, 28, 26, 0.38) on the page */
  --hair: rgba(28, 28, 26, 0.12);
  --grey: #5f5e59;
  max-width: 520px;
  color: var(--ink-2);
}
.wa-stack ul { list-style: none; }

/* Housings: front face, top face receding up and right, side face. */
.ws-unit { --dx: 10px; --dy: 7px; --front: #ecebe6; --top: #f1f0ec; --side: #e0dfd9; --in: 0px;
  position: relative; margin: var(--dy) calc(var(--dx) + var(--in)) 0 var(--in); padding: 14px 14px 18px;
  background: var(--front); border: 1px solid var(--edge); }
.ws-unit::before, .ws-unit::after { content: ""; position: absolute; border: 1px solid var(--edge); }
.ws-unit::before { left: -1px; right: -1px; bottom: calc(100% + 1px); height: var(--dy); border-bottom: 0;
  background: var(--top); transform-origin: 0 100%; transform: skewX(calc(0deg - atan2(var(--dx), var(--dy)))); }
.ws-unit::after { left: calc(100% + 1px); top: -1px; bottom: -1px; width: var(--dx); border-left: 0;
  background: var(--side); transform-origin: 0 0; transform: skewY(calc(0deg - atan2(var(--dy), var(--dx)))); }
.ws-meta { --in: 12px; }
.ws-core { --in: 5px; }
.ws-base { --dx: 14px; --dy: 10px; --front: #e6e5e0; --top: #eeede8; --side: #d9d8d2; }

/* Assembly lines: from pins under the upper housing to holes in the top face below. */
.ws-mount { --in: 0px; --dx: 10px; --land: 4px; position: relative; z-index: 1; height: 40px; margin: 0 calc(var(--dx) + var(--in)) 0 var(--in); }
.ws-mount i { position: absolute; top: 0; bottom: calc(0px - var(--land)); width: 1px;
  background: repeating-linear-gradient(to bottom, rgba(28, 28, 26, 0.42) 0 9px, transparent 9px 12px, rgba(28, 28, 26, 0.42) 12px 13.5px, transparent 13.5px 16.5px); }
.ws-mount i:first-child { left: 13px; }
.ws-mount i:last-child { right: 13px; }
.ws-mount i::before { content: ""; position: absolute; top: -1px; left: -0.5px; width: 2px; height: 7.5px; border-radius: 1px; background: #3a3a37; }
.ws-mount i::after { content: ""; position: absolute; bottom: -1.6px; left: -2.7px; width: 6.4px; height: 3.2px; border-radius: 50%; background: #3a3a37; }
.ws-mount-1 { --in: 12px; }
.ws-mount-2 { --in: 5px; --land: 6px; }

/* Nameplates */
.ws-plate { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); }
.ws-role { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--grey); white-space: nowrap; }
.ws-unit > .ws-plate { margin-bottom: 14px; }

/* The console face */
.ws-console { background: var(--screen); border: 1px solid rgba(28, 28, 26, 0.28); border-radius: 4px; }
.ws-cap { padding: 7px 11px 6px; border-bottom: 1px solid var(--hair); font-size: 11px; font-weight: 600; letter-spacing: 0.09em; line-height: 16px; text-transform: uppercase; color: var(--grey); }
.ws-screen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.ws-views { align-self: stretch; padding: 7px 6px 9px; border-right: 1px solid var(--hair); font-size: 12px; font-weight: 500; line-height: 18px; color: var(--ink-2); }
.ws-views li { padding: 0 5px; border-radius: 2px; }
.ws-views li.on { background: rgba(28, 28, 26, 0.06); color: var(--ink); }
.ws-topo { display: block; margin: 0 auto; overflow: visible; }
.ws-topo .te { fill: none; stroke: rgba(28, 28, 26, 0.28); stroke-width: 1; }
.ws-topo .tn { fill: var(--ink-2); }
.ws-topo .tn.hub { fill: var(--screen); stroke: var(--ink-2); stroke-width: 1.2; }

/* Modules: a cell, and its facts on a leader beneath it */
.ws-mods { display: grid; gap: 14px; }
.ws-ports + .ws-mods { margin-top: 16px; }
.ws-cell { position: relative; padding: 8px 12px 9px; background: var(--screen); border: 1px solid rgba(28, 28, 26, 0.2); border-radius: 3px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 20px; color: var(--ink); }
.ws-cell h4 { font: inherit; }
.ws-cell::after { content: ""; position: absolute; left: 12px; bottom: -3px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.ws-facts { position: relative; padding: 7px 0 0 28px; font-size: 14px; line-height: 19px; color: var(--ink-2); }
.ws-facts::before { content: ""; position: absolute; left: 15px; top: 0; bottom: 5px; border-left: 1px solid rgba(28, 28, 26, 0.42); }
.ws-facts li { padding-left: 10px; text-indent: -10px; text-wrap: balance; }
.ws-facts li + li { margin-top: 4px; }

/* Ports: the surfaces as a pinout along Core's top */
.ws-ports { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 12px 8px; padding: 2px 0 14px; border-bottom: 1px solid var(--hair); text-align: center; }
.ws-ports li { display: flex; flex-direction: column; align-items: center; line-height: 16px; }
.ws-jack { width: 14px; height: 14px; margin-bottom: 5px; border: 1px solid rgba(28, 28, 26, 0.55); border-radius: 50%; background: radial-gradient(circle, #3a3a37 0 2.6px, var(--screen) 3.1px); }
.ws-ports b { font-size: 12px; font-weight: 600; color: var(--ink); }
.ws-kind { font-size: 11px; color: var(--grey); }

/* Realms: its own module, with what a realm holds written into its cell */
.ws-realms .ws-cell { padding-bottom: 0; }
.ws-holds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 9px -12px 0; border-top: 1px solid var(--hair); border-radius: 0 0 2px 2px; overflow: hidden; background: var(--hair);
  font-size: 12px; font-weight: 400; letter-spacing: 0; line-height: 16px; color: var(--grey); }
.ws-holds li { padding: 6px 6px 7px 12px; background: var(--screen); }
.ws-realms .ws-cell::after { z-index: 1; }

/* The formal core: its plate and the state-machine chain, facts beneath */
.ws-part { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.ws-part::after { content: ""; position: absolute; left: 13px; bottom: -3px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.ws-chain { display: block; overflow: visible; }
.ws-chain path, .ws-chain circle { fill: none; stroke: #6c6b66; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.ws-chain circle.end { fill: #6c6b66; stroke: none; }

/* Tablets: the same HTML with the housings' proportions of the wide drawing - deeper faces, Core's
   modules in two columns with Realms as a band under both, the ports in one row, and (from 900px)
   the console in the middle of Meta between its other modules. */
@media (min-width: 660px) and (max-width: 1079px) {
  .wa-stack { max-width: 880px; }
  .ws-unit { --dx: 20px; --dy: 13px; padding: 20px 20px 24px; }
  .ws-base { --dx: 26px; --dy: 17px; }
  .ws-meta, .ws-mount-1 { --in: 40px; }
  .ws-core, .ws-mount-2 { --in: 16px; }
  .ws-mount { --dx: 20px; --land: 8px; height: 56px; }
  .ws-mount-2 { --land: 10px; }
  .ws-mount i:first-child { left: 20px; }
  .ws-mount i:last-child { right: 20px; }
  .ws-plate { font-size: 18px; }
  .ws-unit > .ws-plate { margin-bottom: 18px; }
  .ws-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
  .ws-core .ws-mods { grid-template-rows: repeat(4, auto); grid-auto-flow: column; }
  .ws-console, .ws-realms { grid-column: 1 / -1; }
  .ws-realms { grid-row: 5; }
  .ws-ports { grid-template-columns: repeat(8, auto); padding: 4px 4px 16px; }
  .ws-ports + .ws-mods { margin-top: 20px; }
  .ws-holds { grid-template-columns: repeat(6, auto); }
}
/* From 760px what a realm holds fits beside its name, as in the wide drawing's band. */
@media (min-width: 760px) and (max-width: 1079px) {
  .ws-realms .ws-cell { display: flex; align-items: center; padding-bottom: 9px; }
  .ws-holds { display: flex; margin: 0 0 0 18px; border: 0; border-left: 1px solid var(--hair); }
  .ws-holds li { padding: 0 12px; }
}
@media (min-width: 900px) and (max-width: 1079px) {
  .ws-meta .ws-mods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-meta .ws-console { grid-column: 2; grid-row: 1 / 3; align-self: start; }
  .ws-meta .ws-mod:nth-child(2) { grid-column: 1; grid-row: 1; }
  .ws-meta .ws-mod:nth-child(3) { grid-column: 1; grid-row: 2; }
  .ws-meta .ws-mod:nth-child(4) { grid-column: 3; grid-row: 1; }
  .ws-meta .ws-mod:nth-child(5) { grid-column: 3; grid-row: 2; }
}