/* Falcon 6048's Topology section (product_scroll.blade.php): an interactive view of its
   converged configuration, compute client and storage server in one chassis. Ported from
   a standalone prototype; js/product-topology.js draws the links and runs the selection.

   Everything is scoped to .falcon-topology with ft- classes. The prototype stacked later
   override rules over earlier ones; what is here is the result they produced, so there is
   one rule per thing. Type follows the page (falcon-type.css), every component label at
   the NIC's size. Sizes are in rem, so the diagram scales with the page's root size (14px,
   13px from 1280px, 12px from 1024px) instead of keeping its blocks while the type shrinks.
   The vertical spacing also gives way on a short window (min() against svh, the window
   without the browser's own bars), so the whole card fits under the header and tab bar on
   a laptop.

   The look follows this page's Architecture section rather than the prototype's pastels:
   white blocks, every one in the same thin grey-blue outline, each kind marked by the
   colour of its icon and label (GPU cyan, NIC slate, PCIe switch navy on the
   section's pale blue-grey, SSD groups the orange of Architecture's 512B tag, CPU and DRAM
   the muted grey of its host CPU), a navy frame, grey-blue links that turn cyan, and the
   cyan outline and pale cyan fill that Architecture uses for a selected block. */
.falcon-topology { color: #132234; text-align: left; }
  .falcon-topology *, .falcon-topology *::before, .falcon-topology *::after { box-sizing: border-box; }
  .falcon-topology .ft-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
  /* every icon line 2px on screen, however large its icon is drawn */
  .falcon-topology .ft-symbols * { vector-effect: non-scaling-stroke; }

/* ---- Diagram (two thirds) and details (a third, as on Falcon 5012's Topology) ----
   The card's foot is the configuration note's box, joined on below it. */
.falcon-topology .ft-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  align-items: stretch;
  border: 1px solid #d5dfe5;
  border-radius: 8px 8px 0 0;
  background: #fff; }
.falcon-topology .ft-graph { min-width: 0; padding: min(1.5rem, 2svh); }
.falcon-topology .ft-enclosure {
  --ft-pad-top: min(1.75rem, 3.5svh);
  --ft-frame: 3px;
  container-type: inline-size;
  position: relative;
  padding: var(--ft-pad-top) 1.25rem min(1.5rem, 2svh);
  border: var(--ft-frame) solid #0c2544;
  border-radius: 12px;
  background: #fff; }
/* The product's name on the frame's top edge, the way Falcon 5012's Architecture view
   labels its chassis: centred on the frame line, on white so the line breaks behind it.
   The negative margin lifts it through the padding and half the frame, then half its own
   line (.65em of a 1.3 line height). A second line, on a narrow frame, falls inside. */
.falcon-topology .ft-chassis-label {
  display: flex; /* block-level, so the negative margin lifts it; inline it would stay on its line */
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  margin: calc(-1 * var(--ft-pad-top) - var(--ft-frame) / 2 - .65em) 0 1.25rem;
  padding: 0 12px;
  background: #fff;
  font-size: var(--type-title);
  line-height: 1.3;
  letter-spacing: 0; }
  .falcon-topology .ft-product { color: #0c2544; font-weight: var(--weight-bold); }
  .falcon-topology .ft-subtitle { color: #536776; font-size: var(--type-ui); font-weight: var(--weight-regular); }
.falcon-topology .ft-diagram {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(5.5rem, .35fr);
  gap: 1.5rem;
  align-items: center; }
.falcon-topology .ft-branch {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: min(2.25rem, 3svh) .875rem;
  align-items: stretch; }
.falcon-topology .ft-host { display: flex; flex-direction: column; gap: 2rem; }

/* ---- Components ---- */
.falcon-topology .ft-node {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-width: 0;
  margin: 0;
  padding: 1rem .75rem;
  border: 1px solid #afbfcb;
  border-radius: 3px;
  background: #fff;
  color: var(--ft-ink, #1a2332);
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow .18s, opacity .18s, background .18s; }
  /* every label at the NIC's size */
  .falcon-topology .ft-node strong { font-size: var(--type-title); font-weight: var(--weight-bold); line-height: var(--leading-ui); }
  .falcon-topology .ft-node:hover { border-color: #00addb; }
  .falcon-topology .ft-node:focus-visible { outline: 3px solid #00769a; outline-offset: 5px; }
  .falcon-topology .ft-node[aria-pressed="true"] { border-color: #00addb; background: #e1f4f8; box-shadow: 0 0 0 3px rgba(0, 173, 219, .3); }
.falcon-topology .ft-icon { flex-shrink: 0; width: 3rem; height: 3rem; color: inherit; }
.falcon-topology .ft-gpu {
  --ft-ink: #00769a;
  flex-direction: column;
  min-height: min(9rem, 18svh); }
  .falcon-topology .ft-gpu .ft-icon { width: min(6.75rem, 100%); height: 4rem; }
.falcon-topology .ft-nic { --ft-ink: #4a5560; flex-direction: column; }
  .falcon-topology .ft-nic .ft-icon { width: min(4.75rem, 100%); height: 3.25rem; }
.falcon-topology .ft-switch { --ft-ink: #0c2544; grid-column: 1 / -1; min-height: min(5.25rem, 11svh); padding: min(.875rem, 1.5svh) .625rem; gap: .625rem; background: #eaf0f4; }
  .falcon-topology .ft-switch .ft-icon { width: 2.5rem; height: 2.5rem; }
.falcon-topology .ft-storage {
  grid-column: 1 / -1;
  flex-direction: column;
  gap: .875rem;
  min-height: min(7.5rem, 15svh);
  --ft-ink: #b34d00;
  --ft-icon-fill: #fff; } /* the stacked drives are filled with the block's own white, so each hides the one behind */
  .falcon-topology .ft-storage[aria-pressed="true"] { --ft-icon-fill: #e1f4f8; }
  .falcon-topology .ft-storage strong { line-height: 1.4; text-align: center; }
  .falcon-topology .ft-storage .ft-icon { width: min(5.5rem, 100%); height: 3.25rem; }
.falcon-topology .ft-host .ft-node { flex-direction: column; min-height: 6.5rem; padding: .75rem .5rem; }
  .falcon-topology .ft-host .ft-icon { width: 2.5rem; height: 2.5rem; }
  .falcon-topology .ft-dram .ft-icon { width: 4rem; height: 1.75rem; } /* a module is long and low */
/* Falcon 6040: a GPU and two NICs above each switch, so both kinds are drawn smaller */
.falcon-topology.ft-4nic .ft-branch { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: .625rem; }
  .falcon-topology.ft-4nic .ft-gpu,
  .falcon-topology.ft-4nic .ft-nic { padding: 1rem .375rem; gap: .5rem; }
  .falcon-topology.ft-4nic .ft-gpu .ft-icon { width: min(5rem, 100%); height: 3rem; }
  .falcon-topology.ft-4nic .ft-nic .ft-icon { width: min(3.5rem, 100%); height: 2.4rem; }
.falcon-topology .ft-cpu,
.falcon-topology .ft-dram { --ft-ink: #3f4f5c; background: #f5f6f6; }

/* the links, drawn by the script between the blocks' edges */
.falcon-topology .ft-wires {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none; }
.falcon-topology .ft-wire { fill: none; stroke: #8d9ba7; stroke-width: 2; stroke-linejoin: round; transition: opacity .18s; }
  .falcon-topology .ft-wire.ft-dim { opacity: .25; }
  .falcon-topology .ft-wire.ft-active { stroke: #00addb; stroke-width: 3; }

/* ---- Details of the selected component ---- */
.falcon-topology .ft-detail {
  display: flex;
  flex-direction: column;
  gap: 19px;
  min-width: 0;
  padding: 32px 26px;
  border-left: 1px solid #d5dfe5;
  background: #f2f6f8; }
.falcon-topology .ft-eyebrow {
  margin: 0;
  color: #00769a;
  font-size: var(--type-small);
  font-weight: var(--weight-bold);
  line-height: var(--leading-ui);
  letter-spacing: .12em;
  text-transform: uppercase; }
.falcon-topology .ft-capacity { padding-bottom: 22px; border-bottom: 1px solid #d5dfe5; }
  .falcon-topology .ft-capacity[hidden] { display: none; }
  .falcon-topology .ft-capacity h4 {
    margin: 0 0 15px;
    font-size: var(--type-component);
    font-weight: var(--weight-bold);
    line-height: var(--leading-heading);
    letter-spacing: 0; }
.falcon-topology .ft-detail-title {
  margin: 0;
  font-size: var(--type-lead);
  font-weight: var(--weight-bold);
  line-height: 1.3;
  letter-spacing: 0; }
.falcon-topology .ft-detail p:not(.ft-eyebrow) {
  margin: 0;
  font-size: var(--type-body);
  line-height: var(--leading-body); }
.falcon-topology .ft-detail p.ft-connections {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #d5dfe5;
  color: #536776;
  font-size: var(--type-ui);
  line-height: 1.8; }
  .falcon-topology .ft-connections[hidden] { display: none; }

/* ---- Configuration note, in a grey box joined to the foot of the card above ---- */
.falcon-topology .ft-note {
  padding: 16px 24px;
  border: 1px solid #d5dfe5;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #eaf0f4;
  color: #49576a;
  font-size: var(--type-ui);
  line-height: 1.7; }
  .falcon-topology .ft-note p { margin: 0; }

/* ---- Narrower diagrams: CPU and DRAM move under the branches, then everything stacks ----
   The first step is at 520px, not the prototype's 760px: with the blocks in rem the labels
   still fit with CPU and DRAM at the right down to 520px, which keeps that layout, and the
   diagram's height, on laptop screens. */
@container (max-width: 520px) {
  .falcon-topology .ft-diagram { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
  .falcon-topology .ft-host { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; gap: 2rem; }
  .falcon-topology .ft-host .ft-node { width: 7rem; min-height: 6.5rem; }
  .falcon-topology .ft-gpu .ft-icon { width: min(6.75rem, 100%); } }
@container (max-width: 400px) {
  .falcon-topology .ft-diagram { grid-template-columns: 1fr; gap: 2.5rem; }
  .falcon-topology .ft-host { grid-column: auto; justify-content: center; }
  .falcon-topology .ft-gpu { min-height: 8rem; } }

/* ---- Narrower screens: the details move under the diagram ---- */
@media (max-width: 1050px) {
  .falcon-topology .ft-layout { grid-template-columns: minmax(0, 1fr); }
  .falcon-topology .ft-graph { padding: 20px; }
  .falcon-topology .ft-detail {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 14px 25px;
    border-top: 1px solid #d5dfe5;
    border-left: 0; }
    .falcon-topology .ft-eyebrow,
    .falcon-topology .ft-capacity { grid-column: 1 / -1; } }
@media (max-width: 650px) {
  .falcon-topology .ft-graph { padding: 12px; }
  .falcon-topology .ft-enclosure { --ft-pad-top: 24px; --ft-frame: 2px; padding: var(--ft-pad-top) 16px 24px; }
  .falcon-topology .ft-detail { display: flex; gap: 12px; padding: 24px 20px; }
  .falcon-topology .ft-detail p.ft-connections { margin-top: 15px; } }

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