/* /gateway: compact hero, two diagrams, capability grid, tabs. Tokens and type scale come from system.css; nothing here sets h1/h2/h3 sizes. */

/* one section, five blocks */
.gwp { padding-top: clamp(2.5rem, 4vw, 3.5rem); }
.gwp-blk + .gwp-blk { margin-top: clamp(2.5rem, 4.5vw, 4rem); padding-top: clamp(2rem, 3.5vw, 3rem); border-top: 1px solid var(--border); }
.gwp-blk .sec-head { margin-bottom: clamp(1.25rem, 2vw, 1.75rem); gap: .6rem; }

.gwp-dg:not(.dg) ol { display: grid; gap: .5rem; padding-left: 1.25rem; list-style: decimal; color: var(--text-dim); font-size: var(--text-body-size); }
/* blocked request: the router and the provider stay dark */
#dg-arch.is-blocked .n[data-id="router"], #dg-arch.is-blocked .n[data-id="prov"] { opacity: .4; }
#dg-arch.is-blocked .n[data-id="prov"] rect { stroke-dasharray: 4 5; }
.dg .n--core.is-on rect { fill: rgba(90, 93, 203, .2); }

/* capabilities: eight compact cards */
/* eight cards: three columns on desktop (3+3+2), two on tablet, one on phones: the shared .caps breakpoints apply */

/* tabs: segmented control with a sliding ink (same idea as the console), one panel structure for all four */
.gwp-sub { color: var(--text-dim); max-width: none; text-wrap: pretty; font-size: var(--text-body-size); }
.gwp-tabs { display: grid; gap: 1rem; }
.gwp-tabs .gwp-tabbar { display: none; min-width: 0; }
.gwp-tabs.is-js .gwp-tabbar { display: block; }
.gwp-tabs.is-js .gwp-ph { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gwp-tabs .gwp-ph { margin-bottom: .75rem; }
.gwp-tabs .seg { display: flex; width: fit-content; max-width: 100%; }
.gwp-tabs .seg::-webkit-scrollbar { display: none; }
.gwp-tabs .seg > button { flex: none; }
.gwp-tabs .seg__ink { right: auto; }
.gwp-tabs [role="tab"]:focus-visible, .gwp-tabs [role="tabpanel"]:focus-visible, .gq-step:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gwp-panel { display: grid; align-content: start; gap: 1rem; min-width: 0; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); }
.gwp-panel[hidden] { display: none; }
.gwp-foot { color: var(--text-dim); font-size: var(--text-body-size); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.gwp-foot .quiet-row { margin: 0; }

/* quickstart: step rail on the left, one terminal at a time on the right */
.gq { display: grid; grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr); gap: var(--dg-flow); align-items: stretch; }
.gq-rail { display: grid; gap: .5rem; grid-auto-rows: 1fr; align-content: stretch; margin: 0; padding: 0; list-style: none; position: relative; }
.gq-step { display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; width: 100%; text-align: left; padding: .5rem .8rem; border: 1px solid var(--border); border-radius: var(--r-control); background: transparent; color: var(--text-dim); cursor: pointer; font: inherit; transition: border-color var(--dg-hover) var(--ease), background var(--dg-hover) var(--ease), color var(--dg-hover) var(--ease); }
.gq-step i { grid-row: 1 / span 2; --bf: var(--text-faint); transition: inherit; }
.gq-step b { font-weight: 500; color: var(--text); font-size: var(--text-body-size); align-self: center; }
.gq-step span { grid-column: 2; font-size: var(--text-body-size); line-height: 1.5; color: var(--text-faint); }
.gq-step code { white-space: normal; font-size: var(--text-code-size); overflow-wrap: anywhere; }
.gq-step:hover { border-color: var(--border-hover); }
.gq-step[aria-current="step"] { background: var(--surface-2); border-color: var(--border-hover); }
.gq-step[aria-current="step"] i { color: var(--bg); background: var(--text); border-color: var(--text); }
.gq-step[aria-current="step"] span { color: var(--text-dim); }
.gq-view { display: grid; min-width: 0; }
.gq-pane { grid-area: 1 / 1; display: grid; grid-template-rows: auto auto; align-content: start; gap: .5rem; min-width: 0; }
.gq-pane > .code { display: grid; grid-template-rows: auto 1fr; background: var(--bg); box-shadow: none; }
.gq-pane > .code pre { font-size: var(--text-code-size); line-height: 1.65; overflow-x: auto; white-space: pre; }
.gq-pane:not(.is-on) { visibility: hidden; pointer-events: none; }
.gq:not(.is-js) .gq-pane { grid-area: auto; margin-bottom: 1rem; }
.gq-out { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; margin: 0; padding: .65rem 1rem; border: 1px solid var(--border); border-left: 2px solid var(--valid); border-radius: var(--r-control); font-size: var(--text-body-size); color: var(--text-dim); }
.gq-out > span { font-size: var(--text-small-size); letter-spacing: .1em; text-transform: uppercase; color: var(--valid); }
.gq-out code { white-space: normal; overflow-wrap: anywhere; font-size: var(--text-code-size); }
@media (max-width: 63.99rem) {
  .gq { grid-template-columns: minmax(0, 1fr); }
  .gq-rail { grid-auto-flow: column; grid-auto-columns: 1fr; gap: .4rem; }
  .gq-step { grid-template-columns: 1fr; justify-items: start; padding: .6rem .7rem; gap: .35rem; }
  .gq-step i { grid-row: auto; }
  .gq-step span { display: none; }
  .gq-step b { font-size: var(--text-body-size); line-height: 1.3; }
}
@media (max-width: 29.99rem) { .gq-pane > .code pre { font-size: var(--text-code-size); } }

.gwp-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); align-items: stretch; }
.gwp-spec .table-wrap { height: 100%; background: var(--bg); }
.gwp-spec .spec th, .gwp-spec .spec td { padding: .6rem 1rem; }
.gwp-spec .spec th { width: 32%; }
@media (max-width: 63.99rem) { .gwp-spec { grid-template-columns: 1fr; } }
.gwp-ops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem clamp(1rem, 1.6vw, 1.5rem); }
.gwp-ops a { display: grid; align-content: start; gap: .25rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--r-control); color: inherit; text-decoration: none; background: var(--bg); transition: border-color var(--dg-hover) var(--ease); }
.gwp-ops a:hover, .gwp-ops a:focus-visible { border-color: var(--border-hover); }
.gwp-ops a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.gwp-ops b { font-weight: 500; color: var(--text); } .gwp-ops span { color: var(--text-dim); font-size: var(--text-body-size); line-height: 1.5; }
@media (max-width: 63.99rem) { .gwp-ops { grid-template-columns: 1fr; } }
.gwp-tabs .dms > div { padding: 1.1rem 1.25rem; background: var(--bg); }


.gwp-end { text-align: center; }
.gwp-end .quiet-row { margin: 0; justify-content: center; flex-wrap: wrap; }
.gwp-blk.gwp-end { padding-top: clamp(1.25rem, 2vw, 1.75rem); }

/* length trims */
.fx .gwp .rv { opacity: 1; transform: none; transition: none; }
.gwp { padding-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.gwp-blk + .gwp-blk { margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-top: clamp(1.5rem, 2.5vw, 2rem); }
.gwp-blk .sec-head { margin-bottom: 1.1rem; gap: .4rem; }
.gwp { border-top: 1px solid transparent; border-image: var(--rule-fade) 1; }

.gwp-stage { display: grid; min-width: 0; }

/* fill the reserved height: content stretches, the footer sits at the bottom; code wraps at spaces */
.gwp-tabs.is-js .gwp-panel { grid-template-rows: minmax(0, 1fr); align-content: stretch; }
.gwp-tabs.is-js .gwp-panel:has(> .gwp-foot) { grid-template-rows: minmax(0, 1fr) auto; }
.gwp-foot > .quiet-row { margin-left: auto; }
@media (min-width: 64rem) { .gq-rail { grid-auto-rows: 1fr; } .gq-step { align-content: center; } }
.gq-pane > .code pre { white-space: pre-wrap; overflow-wrap: normal; word-break: normal; }
.gwp-ops { align-content: stretch; grid-auto-rows: 1fr; }
.gwp-tabs .dms { align-items: stretch; }

/* tighter spec tables so the four panels have similar heights */
.gwp-spec .spec th, .gwp-spec .spec td { padding: .42rem .9rem; }
.gwp-spec .spec .grp th { padding-block: .5rem; }
.gwp-spec .spec th { width: 29%; }
@media (min-width: 64rem) { .gwp-spec .spec th { font-size: var(--text-body-size); } }
.gwp-tabs .dms > div { display: grid; align-content: start; gap: .35rem; padding: 1.25rem 1.4rem; }
.gwp-tabs .dms h3 { margin: 0; }
.gwp-tabs .dms p { font-size: var(--text-body-size); line-height: 1.65; }

/* fuller panels: roomier terminal, centred cards */
.gq-out { flex-wrap: nowrap; align-items: baseline; }
.gq-out > span { flex: none; }
.gq-out em { font-style: normal; min-width: 0; line-height: 1.6; }
.gq-pane > .code pre { font-size: var(--text-code-size); line-height: 1.65; padding: .7rem 1rem; }
.gwp-ops a { align-content: center; gap: .4rem; padding: 1.1rem 1.3rem; }
.gwp-ops b { font-size: var(--text-card-title-size); } .gwp-ops span { font-size: var(--text-body-size); }

@media (max-width: 47.99rem) { .gq-out { flex-wrap: wrap; } .gq-pane > .code pre { font-size: var(--text-code-size); line-height: 1.7; padding: 1rem; } }

/* decision-makers: three equal rows that fill the panel */
@media (min-width: 64rem) {
  .gwp-tabs .dms { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: .75rem; }
  .gwp-tabs .dms > div { grid-template-columns: minmax(10rem, 1fr) minmax(0, 3.5fr); align-items: center; align-content: center; gap: 0 2rem; padding: 1rem 1.5rem; }
  .gwp-tabs .dms h3 { margin: 0; }
}
@media (max-width: 63.99rem) {
  .gwp-tabs.is-js .gwp-panel, .gwp-tabs.is-js .gwp-panel:has(> .gwp-foot) { grid-template-rows: none; align-content: start; }
  .gq { align-content: start; }
  .gq-pane > .code { grid-template-rows: auto auto; }
}
.gq-rail > li { display: grid; } .gq-step { height: 100%; }
@media (max-width: 63.99rem) { .gwp-foot > .quiet-row { margin-left: 0; } .gq-rail > li { display: block; } .gq-step { height: auto; } }
.gwp-foot > .quiet-row { margin-left: 0; }
@media (max-width: 63.99rem) { .gq-pane { grid-template-rows: auto auto; } .gq-pane > .code { align-content: start; } }