/* Adaptive routing diagram and compute choices. */
#routing, #start, #panel-agents, .routing-figure {
  --route-accent: #a65439;
  --route-soft: #f8eee9;
  --route-surface: #fcfbf9;
  --route-node: #fff;
  --route-muted: #d2cfc7;
}
#routing {
  border-top: 0;
  padding-block: clamp(24px, 2vw, 32px);
  font-family: Inter, Geist, "Helvetica Neue", Arial, sans-serif;
  scroll-margin-top: calc(var(--anchor-top, 96px) - clamp(24px, 2vw, 32px)); /* --anchor-top minus the top padding (2026-10-31) */
}
:is(#routing, #start) .routing-link { display: inline-flex; align-items: center; gap: 16px; font-size: 14px; padding-block: 8px; }
:is(#routing, #start) .routing-link span { color: var(--route-accent, #a65439); transition: transform 180ms ease; }
:is(#routing, #start) .routing-link:hover span { transform: translate(2px, -2px); }
#panel-agents { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(32px, 4vw, 64px); }
#panel-agents .routing-visual { min-width: 0; align-self: start; margin-top: -164px; gap: 0; }
#panel-agents .routing-visual::before { display: none; }
.routing-figure { min-width: 0; width: 100%; max-width: 760px; margin-inline: auto; container-type: inline-size; }
.routing-figure .routing-board { position: relative; aspect-ratio: 760 / 600; font: clamp(10px, 1.65cqw, 13px)/1.45 Inter, Geist, "Helvetica Neue", Arial, sans-serif; background-image: radial-gradient(circle, var(--line) .7px, transparent .9px); background-size: 22px 22px; }
.routing-figure .routing-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.routing-figure .routing-wire { stroke: #aaa69e; stroke-width: 1.2; }
.routing-figure .routing-wires marker path { stroke: #aaa69e; stroke-width: 1.2; }
.routing-figure .routing-box { position: absolute; padding: 2.1%; border: 1px solid var(--line); border-radius: 15px; background: var(--route-node); }
.routing-figure .routing-box h3 { margin: 0 0 12px; font: inherit; color: var(--dim); }
.routing-figure .routing-box ul { list-style: none; margin: 0; padding: 0; }
.routing-figure .routing-inputs { left: 0; bottom: 32%; width: 28.42105263%; }
.routing-figure .routing-chip-list { display: flex; flex-direction: column; gap: 6px; }
.routing-figure .routing-chip-list li { display: flex; align-items: center; gap: 7px; padding: 6px 7px; border-radius: 6px; white-space: nowrap; background: #f1f0ec; color: #34332f; font-size: .95em; }
.routing-figure .routing-inputs .routing-chip-list li { white-space: nowrap; }
.routing-figure .routing-chip-list svg { flex: none; width: 15px; height: 15px; fill: none; stroke: #79776f; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.routing-figure .routing-engine { left: 50%; top: 52.5%; transform: translate(-50%, -50%); width: 32.89473684%; display: flex; flex-direction: column; background: #fff; border-color: rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(0, 0, 0, .06), 0 24px 60px -28px rgba(0, 0, 0, .35); padding: calc(2.6% + 10px) 2.6%; }
.routing-figure .routing-engine h3 { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; color: #121110; font: 500 clamp(16px, 2.55cqw, 20px)/1.2 Inter, Geist, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.025em; }
.routing-figure .routing-engine .brand-mark { width: 23px; height: 23px; color: currentColor; }
.routing-figure .routing-engine p { margin: 0; font-size: .95em; line-height: 1.8; color: #6B6963; white-space: nowrap; }
.routing-figure .routing-targets { right: 0; top: 52.5%; transform: translateY(-50%); width: 28.42105263%; }
.routing-figure .routing-targets .routing-chip-list li { background: #f0eef5; color: #605774; }
.routing-figure .routing-targets .routing-chip-list li > span { width: 14px; font-size: 16px; line-height: 1; text-align: center; }
.routing-figure .routing-models { margin-top: 14px; padding-top: 12px; border-top: 1px solid #E5E3DE; }
.routing-figure .routing-model-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 204px; gap: 12px 6px; margin-inline: auto; padding-block: 2px 3px; }
.routing-figure .routing-model-tile { display: flex; align-items: center; justify-content: center; min-width: 0; aspect-ratio: 1; border-radius: 26%; border: 1px solid #E5E3DE; background: #fff; }
.routing-figure .routing-model-tile img { display: block; width: calc(100% - 8px); max-width: 20px; height: auto; aspect-ratio: 1; object-fit: contain; border: 0; border-radius: 0; }
.routing-figure .routing-transports { margin-top: 16px; padding-top: 14px; border-top: 1px solid #E5E3DE; }
.routing-figure .routing-transports h4 { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 10px; font: inherit; color: #6B6963; }
.routing-figure .routing-transports h4 span { color: #77746D; font-size: .85em; }
.routing-figure .routing-link-types { display: flex; gap: 5px; }
.routing-figure .routing-link-types li { padding: 5px 12px; border-radius: 6px; background: #F0F0F0; color: #6B6963; font-size: .85em; white-space: nowrap; text-align: center; }
.routing-figure figcaption { margin-top: 20px; font: 10px/1.6 Inter, Geist, "Helvetica Neue", Arial, sans-serif; color: var(--dim); text-align: center; }
#routing .routing-deploy { padding: clamp(24px, 3vw, 38px); background: var(--route-surface); border: 1px solid var(--line); border-radius: 18px; scroll-margin-top: var(--anchor-top, 96px); }
#routing .routing-deploy-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
#routing .routing-deploy-head h2 { margin: 0; font-weight: 450; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.15; letter-spacing: -.035em; }
#routing .routing-deploy-head .routing-link { white-space: nowrap; font-size: 13px; }
#routing .routing-deploy-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
#routing .routing-deploy-options article { display: flex; gap: 14px; }
#routing .routing-deploy-options svg { flex: none; width: 30px; height: 30px; color: var(--dim); }
#routing .routing-deploy-options h4 { margin: 0 0 8px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
#routing .routing-deploy-options p { margin: 0; max-width: 26em; color: var(--dim); font-size: 13px; line-height: 1.6; text-wrap: balance; } /* 26em keeps every description on two lines at any width (the shortest is about 32em on one line), and balance splits them evenly instead of running the first line the full column (Nick 2026-10-31: "make the compute description column slightly more narrow on the 1st and 3rd column so the description is not so wide but still on 2 lines") */
html[data-theme="dark"] :is(#routing, #start, #panel-agents, .routing-figure) { --route-accent: #e1987e; --route-soft: #33231c; --route-surface: #121210; --route-node: #1b1b18; --route-muted: #48463f; }
html[data-theme="dark"] .routing-figure .routing-chip-list li { background: #2b2a26; color: #ccc8bd; }
html[data-theme="dark"] .routing-figure .routing-chip-list svg { stroke: #b3afa4; }
html[data-theme="dark"] .routing-figure .routing-targets .routing-chip-list li { background: #2c2835; color: #c7bbdd; }
@media (max-width: 1100px) {
  #panel-agents { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  #panel-agents .routing-visual { margin-top: 0; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  /* Trim the diagram's empty upper canvas when it sits below the copy. */
  .routing-figure .routing-board { aspect-ratio: 760 / 480; }
  .routing-figure .routing-wires { top: -25%; height: 125%; }
  .routing-figure .routing-inputs { bottom: 40%; }
  .routing-figure .routing-engine, .routing-figure .routing-targets { top: 40.625%; }
}
@media (min-width: 881px) and (max-width: 1100px) {
  /* The stacked diagram should not reserve blank space in the other tabs. */
  #panel-agents[hidden] { display: none; }
}
@media (max-width: 880px) {
  #routing .routing-deploy-options { grid-template-columns: minmax(0, 1fr); gap: 25px; }
  /* Stacked, the card reads title, the three options, then the Talk deployment link last (Nick 2026-10-31:
     "move talk deployment and the arrow to the end of the global mesh section at the bottom"); the head's
     two children become direct children of the card so they can be ordered around the options. */
  #routing .routing-deploy { display: flex; flex-direction: column; }
  #routing .routing-deploy-head { display: contents; }
  #routing .routing-deploy-head h2 { order: 1; margin-bottom: 25px; }
  #routing .routing-deploy-options { order: 2; }
  #routing .routing-deploy-head .routing-link { order: 3; align-self: flex-start; margin-top: 26px; }
  #routing .routing-deploy-options article { gap: 18px; }
  #routing .routing-deploy-options p { max-width: 34em; font-size: 14px; }
}
@media (max-width: 760px) {
  .routing-figure .routing-board { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "inputs" "engine" "targets"; gap: 18px; aspect-ratio: auto; padding: 12px 0; font-size: 14px; }
  .routing-figure .routing-wires { display: none; }
  .routing-figure .routing-box { position: relative; inset: auto; transform: none; width: auto; height: auto; padding: 14px 12px; border-radius: 13px; }
  .routing-figure .routing-inputs { grid-area: inputs; justify-self: center; width: 100%; max-width: 340px; }
  .routing-figure .routing-chip-list li { white-space: normal; }
  .routing-figure .routing-engine { grid-area: engine; justify-self: center; width: 100%; max-width: 340px; min-width: 0; padding: 30px 24px; }
  .routing-figure .routing-engine h3 { font-size: 20px; }
  .routing-figure .routing-engine p { font-size: 13px; white-space: normal; }
  .routing-figure .routing-inputs::after, .routing-figure .routing-engine::after { content: "↕"; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); color: var(--dim); font: 16px/18px Inter, Geist, "Helvetica Neue", Arial, sans-serif; }
  .routing-figure .routing-transports h4 span { font-size: 11px; }
  .routing-figure .routing-link-types { justify-content: space-between; }
  .routing-figure .routing-link-types li { flex: 1; text-align: center; font-size: 11px; }
  .routing-figure .routing-targets { grid-area: targets; justify-self: center; width: 100%; max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  #routing *, #routing *::before, #routing *::after, .routing-figure *, .routing-figure *::before, .routing-figure *::after { animation: none !important; transition: none !important; }
}