/* This stylesheet is loaded only on the Solutions page. */
.architecture-lab { --lab-cyan: #78e9f5; --lab-edge: rgb(114 207 232 / .23); min-width: 0; }
.architecture-lab .lab-heading { align-items: center; margin-bottom: 30px; }
.lab-heading > div { flex: 1 1 28rem; min-width: 0; }
.architecture-lab .lab-heading h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.architecture-lab .lab-heading h2 em { color: var(--lab-cyan); font-style: normal; }
.architecture-lab .lab-heading p:last-child { margin-bottom: 0; }
.lab-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.lab-console { min-width: 0; border: 1px solid var(--lab-edge); border-radius: 16px; background: #061a2c; box-shadow: 0 28px 70px #020c2055, 0 0 65px #00b9ee08; }
.lab-toolbar { display: flex; flex-wrap: wrap; min-height: 74px; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 22px; border-bottom: 1px solid var(--lab-edge); border-radius: 15px 15px 0 0; background: linear-gradient(100deg, #102c44, #081e32); }
.lab-console-label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; color: #b5d8e8; font: 500 .65rem/1.5 var(--display); letter-spacing: .14em; }
.lab-console-label > span:nth-child(2) { color: #47738c; }
.lab-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #6ce8df; box-shadow: 0 0 10px #64f0e977; }
.lab-modes { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; max-width: 100%; padding: 4px; border: 1px solid #42708d55; border-radius: 9px; background: #03132277; }
.architecture-lab .lab-modes button { min-width: 0; border: 1px solid transparent; padding: 8px 13px; background: transparent; color: #aac2d7; font-size: .875rem; overflow-wrap: anywhere; }
.architecture-lab .lab-modes button[aria-pressed="true"] { color: #c5f9ff; border-color: #59c8e566; background: #14435a; box-shadow: 0 0 14px #29cfee0a; }
.lab-modes button span { margin-left: 7px; color: var(--lab-cyan); }
.lab-workspace { display: grid; min-width: 0; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); }
/* Cards and the core occupy real grid cells; text determines the row height. */
.lab-stage { --lab-compact: 0; position: relative; isolation: isolate; display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr); grid-template-areas: 'label label label' 'software core ai' 'network core database' 'cloud core security'; grid-template-rows: auto repeat(3, minmax(10.5rem, 1fr)); gap: 24px 16px; padding: 24px; align-items: stretch; background: radial-gradient(ellipse at 50% 41%, #13657544, transparent 40%), radial-gradient(ellipse at 50% 86%, #18548133, transparent 56%), linear-gradient(#061b2d, #041523); }
.lab-stage::before { position: absolute; z-index: -1; inset: 0; opacity: .4; content: ''; background-image: linear-gradient(#62d4f008 1px, transparent 1px), linear-gradient(90deg, #62d4f008 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(transparent, #000 40%, transparent); }
.lab-stage-label { grid-area: label; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 8px; min-width: 0; color: #8bb2c6; font: 500 .6rem/1.5 var(--display); letter-spacing: .12em; }
.lab-links { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: hidden; fill: none; pointer-events: none; }
.lab-floor { stroke: #3ca8cb22; stroke-width: 1; }
.lab-floor path:nth-child(2) { stroke: #55def745; }
.lab-floor path:nth-child(3) { stroke: #7bdbec26; }
.lab-wire { stroke: #3f9bb8; stroke-width: 1.25; opacity: .26; transition: opacity .25s, stroke .25s; }
.lab-particle { stroke: #b2fcf6; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 58; stroke-dashoffset: var(--lab-travel, 0px); opacity: .24; }
[data-lab-route].is-active .lab-wire { opacity: .66; stroke: #40b9d1; }
[data-lab-route].is-active .lab-particle { opacity: .85; }
.has-selection [data-lab-route]:not(.is-active) { opacity: .2; }
.has-selection [data-lab-route].is-active .lab-wire { opacity: .95; stroke: #91eff9; stroke-width: 1.7; }
.has-selection [data-lab-route].is-primary .lab-wire { stroke: #c1fcff; stroke-width: 2.2; }
.lab-core { grid-area: core; position: relative; z-index: 1; width: 100%; max-width: 280px; min-width: 0; align-self: center; justify-self: center; pointer-events: none; }
.lab-core > svg { display: block; width: 100%; height: auto; overflow: visible; }
.lab-core-aura { fill: #35d4ed12; }
.lab-cloud-outline { filter: drop-shadow(0 0 7px #7fefff88); }
.lab-core > span { display: block; margin-top: 12px; color: #8bb7ca; text-align: center; font: 500 .6rem/1.5 var(--display); letter-spacing: .12em; overflow-wrap: anywhere; }
.architecture-lab .lab-node { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; min-height: 10.5rem; padding: 16px; border: 1px solid #69cce852; border-radius: 9px; background: linear-gradient(135deg, #143e52e8, #071f33f2 80%); box-shadow: 0 8px 18px #0003, inset 0 1px #bcf7ff0d; text-align: left; overflow-wrap: anywhere; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease; }
.lab-node-software { grid-area: software; }
.lab-node-ai { grid-area: ai; }
.lab-node-network { grid-area: network; }
.lab-node-database { grid-area: database; }
.lab-node-cloud { grid-area: cloud; }
.lab-node-security { grid-area: security; }
.architecture-lab .lab-node-ai { border-color: #9a91d45c; }
.lab-node-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.lab-node svg, .lab-detail-icon svg { width: 28px; height: 28px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--lab-cyan); }
.lab-node-ai svg { color: #b6b2ff; }
.lab-node-database svg, .lab-node-security svg { color: #91e8cf; }
.lab-node-top > span { min-width: 0; color: #9fc1d1; font: 500 .6rem/1.4 var(--display); letter-spacing: .06em; text-align: right; }
.lab-node-top > span span { padding-inline: 3px; color: #456d84; }
.lab-node strong { min-width: 0; font: 600 clamp(.95rem, 1.1vw, 1.05rem)/1.35 var(--display); color: #e1f5ff; }
.lab-node small { min-width: 0; color: #b3cddd; font-size: .75rem; line-height: 1.5; }
.lab-node-bottom { display: flex; align-items: end; gap: 3px; margin-top: 2px; }
.lab-node-bottom i { width: 4px; height: 5px; background: #4ad4ce; border-radius: 1px; opacity: .45; }
.lab-node-bottom i:nth-child(2) { height: 8px; }
.lab-node-bottom i:nth-child(3) { height: 11px; }
.lab-node-bottom span { margin-left: auto; color: #a0cddd; font-size: .6875rem; line-height: 1.4; }
.architecture-lab .lab-node:disabled { opacity: 1; cursor: default; }
.architecture-lab .lab-node:is(:hover, :focus-visible):not(:disabled) { border-color: #8ce8f3; background: linear-gradient(135deg, #1a4d61f5, #0a2b42fa); box-shadow: 0 0 22px #4bdded22, 0 8px 18px #0003; transform: translateY(-2px); opacity: 1; }
.architecture-lab.has-selection .lab-node { opacity: .57; }
.architecture-lab.has-selection .lab-node.is-related { opacity: .82; }
.architecture-lab .lab-node[aria-pressed="true"] { opacity: 1; border-color: #9bf4fa; background: linear-gradient(135deg, #18546a, #0a2e44); box-shadow: 0 0 0 3px #72f5ff10, 0 0 26px #48d9f12b, inset 0 -2px #78e9f5; transform: none; }
.lab-node[aria-pressed="true"] .lab-node-bottom span { color: #b4fbf3; }
.lab-detail { min-width: 0; padding: 25px 24px 22px; border-left: 1px solid var(--lab-edge); background: radial-gradient(ellipse at 100% 0, #1b4f7433, transparent 65%), linear-gradient(145deg, #0c2942ef, #071d32f5); }
.lab-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding-bottom: 20px; border-bottom: 1px solid #608aab33; }
.lab-overline { min-width: 0; color: #a6c9dc; font: 500 .6875rem/1.5 var(--display); letter-spacing: .1em; overflow-wrap: anywhere; }
.lab-signal { display: flex; flex-shrink: 0; align-items: end; gap: 3px; height: 13px; opacity: var(--lab-signal, .8); }
.lab-signal i { width: 3px; height: 5px; border-radius: 2px; background: #88e9db; }
.lab-signal i:nth-child(2) { height: 9px; }
.lab-signal i:nth-child(3) { height: 13px; }
.lab-detail-content { display: flex; min-width: 0; flex-direction: column; align-items: stretch; padding-top: 24px; }
.lab-detail-content > * { min-width: 0; max-width: 100%; }
.lab-detail-icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 18px; border: 1px solid #60c5dd5c; border-radius: 11px; background: #10405777; box-shadow: inset 0 0 20px #5eddef08; }
.architecture-lab .lab-detail h3 { margin: 0 0 16px; color: #e1f7ff; font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.3; letter-spacing: -.035em; }
.architecture-lab .lab-description { margin: 0 0 24px; color: #c5dbe9; font-size: .95rem; line-height: 1.7; overflow-wrap: anywhere; }
.lab-detail h4 { margin: 0 0 14px; color: #a5c8dc; font: 500 .72rem/1.5 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.lab-capabilities { width: 100%; margin: 0 0 24px; padding: 0; list-style: none; }
.lab-capabilities li { position: relative; padding: 0 0 12px 16px; color: #d4e9f5; font-size: .9rem; line-height: 1.6; overflow-wrap: anywhere; }
.lab-capabilities li::before { content: ''; position: absolute; top: .6em; left: 0; width: 4px; height: 4px; background: #78ddd9; border-radius: 50%; }
.lab-related { display: grid; min-width: 0; width: 100%; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); grid-auto-rows: minmax(44px, auto); gap: 8px; }
.architecture-lab .lab-related button { min-width: 0; min-height: 44px; padding: 9px 10px; color: #b9e4ef; background: #12384e77; border-color: #4387a34d; border-radius: 5px; font-size: .8125rem; line-height: 1.5; text-align: left; overflow-wrap: anywhere; }
.architecture-lab .lab-service-link { display: block; width: 100%; min-height: 44px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #608aab33; color: #a0e6f4; font-size: .875rem; line-height: 1.6; text-decoration: none; overflow-wrap: anywhere; }
.lab-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 16px; padding: 16px 22px; border-top: 1px solid var(--lab-edge); border-radius: 0 0 15px 15px; background: #081e31; color: #a5c2d5; font-size: .75rem; }
.lab-footer > span:first-child { display: flex; align-items: center; gap: 8px; color: #a9d4e4; }
.lab-footer i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #7cddcd; }
.architecture-lab .lab-disclosure { max-width: none; margin: 16px 0 0; color: #a3bed2; font-size: .75rem; }
.lab-guide { margin-top: 20px; border-top: 1px solid var(--lab-edge); }
.lab-guide summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; font-size: .82rem; color: #b8d8e8; }
.lab-guide summary span { color: var(--lab-cyan); }
.lab-guide[open] summary span { transform: rotate(45deg); }
.lab-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding-top: 15px; }
.lab-guide-grid article { padding: 22px; background: var(--panel-card-fill); border-left: 1px solid var(--lab-edge); }
.lab-guide-grid :is(p, li, a) { font-size: .9rem; }
.lab-guide-grid ul { padding-left: 18px; }
.lab-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 1199px) {
  .lab-workspace { grid-template-columns: minmax(0, 1fr); }
  .lab-detail { border-top: 1px solid var(--lab-edge); border-left: 0; }
}
@media (max-width: 700px) {
  .architecture-lab .lab-heading { gap: 18px; }
  .lab-toolbar { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px; }
  .lab-console-label { justify-content: center; }
  .lab-modes { justify-content: center; }
  .lab-modes button { flex: 1 1 8rem; }
  .lab-stage { --lab-compact: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'label label' 'software ai' 'core core' 'network database' 'cloud security'; grid-template-rows: auto minmax(10.5rem, 1fr) auto repeat(2, minmax(10.5rem, 1fr)); gap: 20px 12px; padding: 20px 16px; }
  .architecture-lab .lab-node { padding: 14px 12px; box-shadow: none; }
  .lab-core { width: min(70%, 240px); }
  .lab-links [data-lab-route*=" "] { display: none; }
  .lab-cloud-outline { filter: none; }
  .lab-detail { padding: 22px 20px; }
  .lab-footer { flex-direction: column; gap: 8px; padding: 15px 18px; }
  .lab-guide-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .architecture-lab *, .architecture-lab *::before, .architecture-lab *::after { transition: none !important; }
  .architecture-lab .lab-node:is(:hover, :focus-visible, [aria-pressed="true"]) { transform: none; }
  .lab-particle { stroke-dashoffset: 0; }
  .lab-signal { opacity: .8; }
}