/* Falcon 6048's Architecture section: a conceptual, interactive view of how NVIDIA SCADA
   software, the GPU, the H3 PCIe switch and an NVMe SSD pool fit together. Ported from a
   standalone prototype built in the style of Falcon 5012's Architecture section
   (platform-elements.css), so the two pages read alike.

   Everything is scoped to .scada-arch, with sa- classes, and sized on the Falcon type
   scale (falcon-type.css, loaded on the same page). The diagram's SVG text is the one
   exception: it is sized in the drawing's own units, so it scales with the artwork, and
   those sizes are set so the smallest label still renders at about 12px wherever the
   drawing is shown (it is replaced by the stacked block list below 760px).

   The relationships drawn here were reviewed against their sources before handoff: the
   CPU prepares resources for Storage Setup only (initialisation, not per-request control),
   and no link is drawn from the CPU to any other block, deliberately none to the switch.
   Keep it that way when editing. */
.scada-arch {
  --sa-panel: #f2f6f8;
  --sa-navy: #0e2746;
  --sa-ink: #162432;
  --sa-muted: #536776;
  --sa-cyan: #00addb;
  --sa-accent: #00769a;
  --sa-border: #afbfcb;
  --sa-green: #147d3f;
  --sa-gold: #7a6b42;
  --sa-play: #b34d00;
  --sa-play-hover: #943f00;
  color: var(--sa-ink);
  text-align: left; }
  .scada-arch *, .scada-arch *::before, .scada-arch *::after { box-sizing: border-box; }
  .scada-arch button {
    margin: 0;
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; }
  .scada-arch button:focus-visible,
  .scada-arch [tabindex]:focus-visible {
    outline: 3px solid var(--sa-accent);
    outline-offset: 4px; }

/* ---- Element tabs: the same strip as Falcon 5012's Architecture section ---- */
.scada-arch .sa-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid #aec0d4; }
  .scada-arch .sa-tabs button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11px;
    min-height: 52px; /* 64px before the section was tightened */
    padding: 14px 16px 12px;
    border: 0;
    border-radius: 0;
    background: none;
    color: #4a5560;
    font-size: var(--type-ui);
    line-height: var(--leading-ui);
    text-align: center; }
    .scada-arch .sa-tabs button:hover { background: #cbd9ea; color: #1a2332; }
    .scada-arch .sa-tabs button[aria-selected="true"] { color: #1a2332; font-weight: var(--weight-semibold); }
    .scada-arch .sa-tabs button[aria-selected="true"]::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 3px;
      background: var(--sa-accent); }
    .scada-arch .sa-tabs .sa-tab-arrow { font-size: 1.2em; font-weight: var(--weight-regular); }

/* ---- Panel: the diagram on the left, the selected element's story on the right ----
   The drawing is sized from the window's height, so that with the panel just under the
   sticky bar the drawing's label line and the whole drawing are on screen at once on a
   laptop: 265px is that bar (109px), the panel's padding, the label line and some air
   (the toolbar that used to sit above the drawing is gone), and 720/770 the drawing's
   proportions. It stops at 432px wide, where its
   smallest label is 12px, and at 640px on tall screens.

   The story keeps the rest of the width, behind a full-height rule like the one beside
   the step details in Falcon 5012's Topology section. */
.scada-arch {
  --sa-art-width: clamp(432px, calc((100vh - 265px) * 720 / 770), 640px); }
.scada-arch .sa-panel {
  display: grid;
  grid-template-columns: var(--sa-art-width) minmax(0, 1fr);
  column-gap: 48px;
  align-items: start; /* the drawing stays at the top however tall the story column runs */
  --sa-pad-y: 28px;
  margin-top: 0; /* hangs straight from the element tabs, as a tab panel */
  padding: var(--sa-pad-y) 42px;
  background: var(--sa-panel); }
  /* The right-hand column: the story, top-aligned, and the path explorer in the bottom
     corner. The eyebrow's capitals sit level with the top edge of the drawing's first
     block (GPU Application / Threads). That edge sits the label's line and its 14px margin
     down the column, plus 35 of the drawing's 720 units, which is why the padding follows
     --sa-art-width; .36 of the eyebrow's size is the space above its capitals. */
  .scada-arch .sa-side {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    /* max(): never closer than 12px under the play button in the corner above (28px down,
       40px tall), which only wins on short windows, where the drawing is smallest */
    padding-top: max(calc(var(--type-small) * var(--leading-ui) + 14px + var(--sa-art-width) * 35 / 720 - var(--type-small) * .36), 52px);
    padding-left: 48px;
    border-left: 1px solid #d5dfe5; }
  .scada-arch .sa-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 24px; } /* the least space above the commentary when the story runs long */
/* the drawing's label, with the hint to select a block on the same line */
.scada-arch .sa-art-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 14px;
  white-space: nowrap; }
.scada-arch .sa-hint {
  margin: 0;
  color: #5f6d78;
  font-size: var(--type-small);
  line-height: var(--leading-ui); }
.scada-arch .sa-art-label {
  margin: 0;
  color: #5d6e7b;
  font-size: var(--type-small);
  letter-spacing: .12em;
  line-height: var(--leading-ui); }
.scada-arch .sa-stage { position: relative; }
  .scada-arch .sa-stage svg { display: block; width: 100%; height: auto; overflow: visible; }

/* the drawing; sizes below are in the SVG's units (viewBox 720 wide) */
.scada-arch .sa-node rect { fill: #fff; stroke: var(--sa-border); stroke-width: 1.3; transition: fill .18s, stroke .18s; }
.scada-arch .sa-node[data-art="scada"] rect { fill: #eaf0f4; }
.scada-arch .sa-node[data-art="cpu"] rect { fill: #f5f6f6; stroke: #c6cbd0; }
.scada-arch .sa-node.active rect { fill: #e1f4f8; stroke: var(--sa-cyan); stroke-width: 2; }
.scada-arch .sa-node[data-art="scada"].active rect { fill: #eaf0f4; }
.scada-arch .sa-node-title { text-anchor: middle; fill: var(--sa-ink); font-size: 22px; font-weight: var(--weight-semibold); }
.scada-arch .sa-node-subtitle { text-anchor: middle; fill: var(--sa-muted); font-size: 20px; }
.scada-arch .sa-node[data-art="cpu"] text { fill: #5f6d77; }
.scada-arch .sa-node[data-art="scada"] .sa-node-title { font-size: 26px; }
.scada-arch .sa-node[data-art="setup"] .sa-node-title,
.scada-arch .sa-node[data-art="access"] .sa-node-title { font-size: 20px; }
.scada-arch .sa-software-route { fill: none; stroke: #8d9ba7; stroke-width: 1.5; }
.scada-arch .sa-data-route { fill: none; stroke: var(--sa-green); stroke-width: 2.7; }
.scada-arch .sa-route-caption { text-anchor: middle; fill: var(--sa-gold); font-size: 20px; letter-spacing: .06em; }
.scada-arch .sa-data-caption { fill: var(--sa-green); }
.scada-arch .sa-node,
.scada-arch .sa-data-route { transition: opacity .18s; }
.scada-arch .sa-dim { opacity: .2; }
/* the read animation's 512B tag, riding beside the orange pulse: #d9640b clears 3:1 on
   the panel, and the dark orange of its text 5.28:1 on the tag's white */
.scada-arch .sa-pulse-label rect { fill: #fff; stroke: #d9640b; stroke-width: 1.5; }
.scada-arch .sa-pulse-label text { fill: #b34d00; font-size: 20px; font-weight: var(--weight-bold); }

/* invisible buttons laid over the drawing's blocks, so each block can be selected */
.scada-arch .sa-hotspot {
  position: absolute;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent; }
  .scada-arch .sa-hotspot:hover { outline: 2px solid rgba(0, 173, 219, .5); outline-offset: -2px; }


.scada-arch .sa-eyebrow {
  display: block;
  color: var(--sa-accent);
  font-size: var(--type-small);
  font-weight: var(--weight-bold);
  line-height: var(--leading-ui);
  letter-spacing: .08em; }
.scada-arch .sa-details h3 {
  margin: 12px 0 15px;
  color: var(--sa-ink);
  font-size: var(--type-component);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  letter-spacing: 0; }
.scada-arch .sa-details p {
  margin: 0;
  color: var(--sa-muted);
  font-size: var(--type-body);
  line-height: var(--leading-body); }
.scada-arch .sa-takeaway {
  margin-top: 24px;
  padding-left: 16px;
  border-left: 2px solid var(--sa-cyan); }
  .scada-arch .sa-takeaway > span {
    display: block;
    margin-bottom: 6px;
    color: #64717c;
    font-size: var(--type-small);
    font-weight: var(--weight-bold);
    line-height: var(--leading-ui);
    letter-spacing: .08em; }
  .scada-arch .sa-details .sa-takeaway p { color: var(--sa-ink); }
.scada-arch .sa-text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-top: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sa-accent);
  font-size: var(--type-ui);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui); }
  .scada-arch .sa-text-link:hover { text-decoration: underline; }
  .scada-arch .sa-text-link span { font-size: 1.4em; }

/* ---- The play button's place ----
   Beside the drawing, it sits in the panel's top right corner, over the story column's
   top padding: that padding is there to bring the eyebrow level with the drawing's first
   block, and is at least the button's 46px tall, so the button takes no height of its
   own. With the story under the drawing (1200px and below) it is a row above the drawing. */
.scada-arch .sa-panel { position: relative; }
.scada-arch .sa-controls {
  position: absolute;
  /* as far from the tabs' line above as the panel's own top padding */
  top: var(--sa-pad-y);
  right: 42px;
  display: flex;
  z-index: 1; }

/* ---- The two play buttons ----
   An action, so it is not dressed like the filters beside it: the orange of the animation's
   512B pulse, a pill with a play triangle, bold and taller. The orange is the pulse's deeper
   shade, #b34d00, which white text clears at 5.2:1. The second button sits on the drawing
   (.sa-play-hotspot). Both turn into a stop button, a square, while the animation runs. */
.scada-arch .sa-controls .sa-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 40px; /* 46px in its own row, 1200px and below */
  padding: 8px 20px 8px 16px;
  border: 0;
  border-radius: 23px;
  background: var(--sa-play);
  box-shadow: 0 2px 6px rgba(179, 77, 0, .28);
  color: #fff;
  font-size: var(--type-body);
  font-weight: var(--weight-bold);
  transition: background-color .15s, box-shadow .15s, transform .15s; }
  .scada-arch .sa-controls .sa-play:hover { background: var(--sa-play-hover); box-shadow: 0 4px 10px rgba(179, 77, 0, .32); transform: translateY(-1px); }
.scada-arch .sa-play-icon { flex-shrink: 0; width: 15px; height: 15px; fill: currentColor; }
  .scada-arch .sa-icon-stop,
  .scada-arch .is-playing .sa-icon-play { display: none; }
  .scada-arch .is-playing .sa-icon-stop { display: inline; }
.scada-arch .sa-play-hotspot {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sa-play);
  font-size: var(--type-ui);
  font-weight: var(--weight-bold);
  line-height: var(--leading-ui);
  transform: translate(-50%, -50%);
  cursor: pointer; }
  .scada-arch .sa-play-hotspot .sa-play-icon {
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 14px;
    border-radius: 50%;
    background: var(--sa-play);
    box-shadow: 0 0 0 6px rgba(217, 100, 11, .16), 0 2px 6px rgba(179, 77, 0, .28);
    color: #fff;
    transition: background-color .15s, box-shadow .15s; }
  .scada-arch .sa-play-hotspot .sa-icon-play { transform: translateX(1px); } /* a triangle looks centred a touch right of centre */
  .scada-arch .sa-play-hotspot:hover { color: var(--sa-play-hover); }
    .scada-arch .sa-play-hotspot:hover .sa-play-icon { background: var(--sa-play-hover); box-shadow: 0 0 0 9px rgba(217, 100, 11, .2), 0 3px 8px rgba(179, 77, 0, .32); }

/* The running commentary, at the foot of the story column; margin-top auto keeps it there.
   Its height is held at the longest message by scada-architecture.js, so nothing moves as
   the animation narrates. */
.scada-arch .sa-status {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid #d5dfe5;
  color: var(--sa-muted);
  font-size: var(--type-ui);
  line-height: var(--leading-body); }

/* ---- Stacked block list, in place of the drawing on narrow screens ---- */
.scada-arch .sa-mobile-map { display: none; position: relative; }
/* The read animation on the stacked list: the orange 512B dot and its tag, riding down and
   up the right-hand side of the GPU, switch and NVMe blocks, over them, clear of their
   centred labels. Its top is set by the script as a transform, so it moves without layout. */
.scada-arch .sa-mobile-pulse {
  position: absolute;
  top: -7px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none; }
  .scada-arch .sa-mobile-pulse[hidden] { display: none; }
  .scada-arch .sa-mobile-pulse i {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #d9640b;
    box-shadow: 0 0 0 4px rgba(217, 100, 11, .22); }
  .scada-arch .sa-mobile-pulse b {
    padding: 2px 6px;
    border: 1.5px solid #d9640b;
    border-radius: 4px;
    background: #fff;
    color: #b34d00;
    font-size: 12px;
    font-weight: var(--weight-bold);
    line-height: 1.3; }
.scada-arch .sa-mobile-node {
  display: block;
  width: 100%;
  padding: 13px 10px;
  border: 1px solid var(--sa-border);
  border-radius: 2px;
  background: #fff;
  color: var(--sa-ink);
  font-size: var(--type-ui);
  line-height: var(--leading-ui);
  text-align: center; }
  .scada-arch .sa-mobile-node strong { display: block; font-size: var(--type-body); font-weight: var(--weight-semibold); }
  .scada-arch .sa-mobile-node span { color: var(--sa-muted); font-size: var(--type-small); }
  .scada-arch .sa-mobile-node[aria-pressed="true"] { border-color: var(--sa-cyan); background: #e1f4f8; }
  .scada-arch .sa-mobile-node.sa-highlight { outline: 2px solid var(--sa-green); }
.scada-arch .sa-mobile-scada { padding: 12px; border: 1px solid var(--sa-border); background: #eaf0f4; }
.scada-arch .sa-mobile-functions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.scada-arch .sa-mobile-arrow { padding: 5px; color: var(--sa-green); line-height: 1.4; text-align: center; }
.scada-arch .sa-mobile-control { margin-top: 17px; padding-top: 12px; border-top: 1px dashed var(--sa-gold); }
  .scada-arch .sa-mobile-control p {
    margin: 0 0 8px;
    color: var(--sa-gold);
    font-size: var(--type-small);
    line-height: var(--leading-ui);
    text-align: center; }
  .scada-arch .sa-mobile-control .sa-mobile-node { background: #f5f6f6; color: #5f6d77; }

/* Below 1200px the story would be squeezed beside the drawing, so it moves under it,
   and the rule with it. */
@media (max-width: 1200px) {
  .scada-arch .sa-panel { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
  .scada-arch .sa-controls { position: static; justify-content: flex-end; } /* a row of its own; the panel's row gap spaces it */
  .scada-arch .sa-controls .sa-play { min-height: 46px; padding: 10px 22px 10px 18px; }
  .scada-arch .sa-art { width: 100%; max-width: var(--sa-art-width); margin: 0 auto; }
  .scada-arch .sa-side { padding-top: 24px; padding-left: 0; border-top: 1px solid #d5dfe5; border-left: 0; } }
@media (max-width: 850px) {
  .scada-arch .sa-tabs .sa-tab-arrow { display: none; } }
/* Below 760px the drawing would be too small to read, so the stacked list takes over. */
@media (max-width: 760px) {
  .scada-arch .sa-stage { display: none; }
  .scada-arch .sa-mobile-map { display: block; }
  .scada-arch .sa-tabs { grid-template-columns: 1fr 1fr; }
    .scada-arch .sa-tabs button { min-height: 54px; padding: 14px 8px; }
  .scada-arch .sa-panel { padding: 24px 18px; }
  .scada-arch .sa-art { max-width: none; } }
/* Phones: the tab strip sticks under the page's sticky bars while the panel is on screen
   (it is inside .scada-arch, so it lets go when the panel ends), on the section's colour,
   and is one sideways-scrolling row instead of the 2 x 2 grid, each tab 44px tall with a
   14px label, the next one peeking past the edge: as Falcon 5012's Architecture strip. */
@media (max-width: 767px) {
  .scada-arch .sa-tabs {
    position: sticky;
    top: calc(var(--header-height, 55px) + var(--tab-nav-height, 52px) - 1px);
    z-index: 5;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: #dbe4ef; }
    .scada-arch .sa-tabs::-webkit-scrollbar { display: none; }
    .scada-arch .sa-tabs button {
      flex: 0 0 auto;
      min-height: 44px;
      padding: .7rem 1rem;
      font-size: 14px;
      white-space: nowrap; } }
@media (max-width: 480px) {
  .scada-arch .sa-controls .sa-play { width: 100%; }
  .scada-arch .sa-art-head { white-space: normal; flex-wrap: wrap; gap: 4px 16px; } }

@media (prefers-reduced-motion: reduce) {
  .scada-arch *, .scada-arch *::before, .scada-arch *::after { transition: none !important; } }