/* Page-specific information hierarchy; data attributes and action contracts stay intact. */
html:root .api-console-body .relay-view{max-width:1560px;margin-inline:auto}
html:root .api-console-body .relay-page-head{gap:28px;margin-bottom:32px}
html:root .api-console-body .relay-page-head>div:first-child{min-width:0}
html:root .api-console-body .relay-head-actions{flex-wrap:wrap;justify-content:flex-end;flex-shrink:0}
html:root .api-console-body .relay-head-actions .relay-button{width:auto}
html:root .api-console-body .relay-section{margin-top:24px}

/* Overview: numbers first, recent work next, connection explanation last. */
html:root .api-console-body #overview.is-active{display:flex;flex-direction:column}
html:root .api-console-body #overview>.relay-page-head{order:0}
html:root .api-console-body #overview>.relay-metrics{order:1}
html:root .api-console-body #overview>.relay-columns{order:2;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);gap:22px;margin-top:6px}
html:root .api-console-body #overview>.relay-route{order:3;background:none;border-radius:0;border-inline:0;margin-top:28px;margin-bottom:0;box-shadow:none}
html:root .api-console-body #overview .relay-metrics{background:var(--console-surface);border:1px solid var(--console-line);border-radius:12px;gap:0;overflow:hidden}
html:root .api-console-body #overview .relay-metrics article{border:0;border-radius:0;background:none;border-right:1px solid var(--console-line);padding:26px}
html:root .api-console-body #overview .relay-metrics article:last-child{border-right:0}
html:root .api-console-body #overview .relay-usage-note{border:0;background:none;border-radius:0;padding:22px;font-size:12px;line-height:1.9}
html:root .api-console-body #overview .relay-log-list>span{grid-template-columns:minmax(82px,.75fr) minmax(0,1.5fr) auto}

/* Keys: protect table width. The integration aid becomes a separate work surface below. */
html:root .api-console-body .relay-keys-workbench{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
html:root .api-console-body .relay-keys-workbench .relay-panel-wide{grid-column:auto;min-height:0}
html:root .api-console-body #keys .relay-table-actions{display:none}
html:root .api-console-body .relay-keys-workbench .relay-guide{position:static;display:grid;grid-template-columns:minmax(240px,.85fr) minmax(0,1.5fr);gap:18px 26px;padding:0 24px 24px;align-items:start}
html:root .api-console-body .relay-keys-workbench .relay-guide .relay-panel-head{grid-column:1/-1;margin:0 -24px;padding:20px 24px}
html:root .api-console-body .relay-keys-workbench .relay-guide .relay-field{display:grid;grid-column:1;margin:0;width:100%}
html:root .api-console-body .relay-keys-workbench .relay-guide .relay-code{display:block;grid-column:2;grid-row:2/5;min-height:205px;max-height:350px;width:100%;margin:0;overflow:auto}
html:root .api-console-body .relay-keys-workbench .relay-guide .relay-button{display:inline-flex;grid-column:1;width:max-content;max-width:100%;margin:0}
html:root .api-console-body .relay-keys-workbench .relay-guide .relay-note{display:block;grid-column:1/-1;margin:0;width:100%}

/* Logs and exports keep their records as the primary surface. */
html:root .api-console-body :is(#logs,#export)>.relay-panel{margin-top:0}
html:root .api-console-body :is(#keys,#logs,#usage,#export) .relay-table-wrap{overflow:auto;max-height:65vh;overscroll-behavior:contain}
html:root .api-console-body :is(#keys,#logs,#usage,#export) .relay-table thead th{position:sticky;top:0;z-index:2;background:var(--console-inset)}
html:root .api-console-body :is(#logs,#usage,#export) .relay-table-state{min-height:230px;padding:36px}
html:root .api-console-body #export .relay-head-actions{gap:10px}
html:root .api-console-body #export .relay-head-actions .relay-button{min-height:44px}

/* Usage: transaction truth above the explanatory text. */
html:root .api-console-body #usage.is-active{display:flex;flex-direction:column}
html:root .api-console-body #usage>.relay-page-head{order:0}
html:root .api-console-body #usage>.relay-panel{order:1;margin-top:0}
html:root .api-console-body #usage>.relay-columns{order:2;display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}
html:root .api-console-body #usage .relay-usage-note{border:0;background:none;padding:22px;line-height:1.9;font-size:13px}

/* Wallet: clear payment task at left, orders at right; ledger remains below. */
html:root .api-console-body .relay-wallet-workbench{display:grid;grid-template-columns:minmax(310px,.8fr) minmax(0,1.4fr);gap:24px;align-items:start}
html:root .api-console-body .relay-wallet-workbench>.relay-section{margin-top:0}
html:root .api-console-body .relay-recharge-body{display:flex;flex-direction:column;padding:24px;gap:24px}
html:root .api-console-body .relay-recharge-form{display:flex;flex-direction:column;gap:16px;min-width:0}
html:root .api-console-body .relay-recharge-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
html:root .api-console-body .relay-recharge-presets button{min-height:42px;background:var(--console-inset);border:1px solid var(--console-line);border-radius:8px;color:var(--console-text);font-size:13px}
html:root .api-console-body .relay-recharge-presets button.is-active{border-color:var(--accent);background:var(--console-selected)}
html:root .api-console-body .relay-recharge-actions{display:flex;gap:10px;flex-wrap:wrap}
html:root .api-console-body .relay-recharge-actions>.relay-button-primary{flex:1;justify-content:center;min-height:46px}
html:root .api-console-body .relay-recharge-side{padding-top:20px;border-top:1px solid var(--console-line)}
html:root .api-console-body .relay-recharge-steps{background:none;border:0;padding:0;box-shadow:none}
html:root .api-console-body .relay-recharge-steps ol{display:grid;grid-template-columns:1fr;gap:12px;font-size:12px;line-height:1.7;color:var(--console-muted)}
html:root .api-console-body .relay-recharge-orders-panel .relay-table-wrap{overflow:auto;max-height:620px}

/* Activity: low-height summary, spacious chronological rows. */
html:root .api-console-body #activity .relay-metrics article{min-height:106px;padding:18px 22px}
html:root .api-console-body #activity .relay-log-list>span{grid-template-columns:minmax(100px,.8fr) minmax(0,2fr) auto;padding:22px 24px;gap:24px}
html:root .api-console-body #activity .relay-log-list>span b{font-size:14px}

/* Docs: connection details and rules beside each other, full-width examples below. */
html:root .api-console-body #docs.is-active{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
html:root .api-console-body #docs>.relay-page-head{grid-column:1/-1;margin-bottom:8px}
html:root .api-console-body #docs>.relay-section{margin:0;min-width:0}
html:root .api-console-body #docs>.relay-doc-connection{grid-column:1}
html:root .api-console-body #docs>.relay-doc-rules-panel{grid-column:2}
html:root .api-console-body #docs>.relay-doc-integration-panel,html:root .api-console-body #docs>.relay-doc-examples-panel{grid-column:1/-1}
html:root .api-console-body .relay-doc-config{display:grid;grid-template-columns:1fr;gap:18px;padding:22px}
html:root .api-console-body .relay-doc-config>span{display:grid;gap:9px;min-width:0;background:none;border:0;padding:0}
html:root .api-console-body .relay-doc-config em{overflow-wrap:anywhere;white-space:normal;font-size:12px}
html:root .api-console-body .relay-doc-endpoints{padding:0 22px 22px;display:grid;gap:10px;min-width:0}
html:root .api-console-body .relay-doc-endpoints em{font:12px/1.9 ui-monospace,monospace;overflow-wrap:anywhere}
html:root .api-console-body .relay-doc-rules>span{grid-template-columns:70px minmax(0,1fr) auto}
html:root .api-console-body .relay-code-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:22px}
html:root .api-console-body .relay-code-card{min-width:0;background:var(--console-inset);border:1px solid var(--console-line);border-radius:10px;padding:16px}
html:root .api-console-body .relay-code-card .relay-code{margin:12px 0 0;padding:0;border:0;background:none;max-height:360px;overflow:auto}

/* Model market: compact category rail, more room for specifications. */
html:root .api-console-body #models .relay-model-tabs{display:flex;gap:6px;padding:6px;overflow:auto;margin-top:0}
html:root .api-console-body #models .relay-model-tabs button{min-height:62px;flex:1;min-width:130px;padding:12px 16px;text-align:left}
html:root .api-console-body #models .relay-model-tabs b{font-size:15px}
html:root .api-console-body #models .relay-model-tabs em{font-size:11px;line-height:1.5}
html:root .api-console-body #models .relay-price-list[data-api-models-list]{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:18px;padding:22px}

@media(max-width:1250px){html:root .api-console-body .relay-wallet-workbench{grid-template-columns:1fr}html:root .api-console-body .relay-recharge-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}html:root .api-console-body .relay-recharge-side{border-top:0;border-left:1px solid var(--console-line);padding:0 0 0 24px}html:root .api-console-body #overview>.relay-columns{grid-template-columns:1fr}}
@media(max-width:980px){html:root .api-console-body #docs.is-active{grid-template-columns:1fr}html:root .api-console-body #docs>.relay-section{grid-column:1}html:root .api-console-body .relay-page-head{gap:18px}html:root .api-console-body .relay-head-actions{justify-content:flex-start}html:root .api-console-body #overview .relay-metrics article{padding:20px}}
@media(max-width:680px){html:root .api-console-body .relay-keys-workbench .relay-guide{display:flex;flex-direction:column;padding:0 18px 18px;gap:18px}html:root .api-console-body .relay-keys-workbench .relay-guide .relay-panel-head{align-self:stretch;margin:0 -18px}html:root .api-console-body .relay-keys-workbench .relay-guide .relay-code{min-height:160px;max-height:260px}html:root .api-console-body .relay-recharge-body{display:flex;padding:18px}html:root .api-console-body .relay-recharge-side{border-left:0;border-top:1px solid var(--console-line);padding:20px 0 0}html:root .api-console-body #usage>.relay-columns{grid-template-columns:1fr}html:root .api-console-body .relay-code-grid{grid-template-columns:1fr;padding:16px}html:root .api-console-body .relay-doc-rules>span{grid-template-columns:58px minmax(0,1fr)}html:root .api-console-body .relay-doc-rules>span i{grid-column:2}html:root .api-console-body #activity .relay-log-list>span{grid-template-columns:1fr auto;gap:8px;padding:18px}html:root .api-console-body #activity .relay-log-list>span em{grid-row:2;grid-column:1/-1}html:root .api-console-body #overview .relay-log-list>span{grid-template-columns:1fr auto}html:root .api-console-body #overview .relay-log-list>span em{grid-row:2;grid-column:1/-1}html:root .api-console-body #overview .relay-metrics article{border-bottom:1px solid var(--console-line)}html:root .api-console-body :is(#logs,#usage,#export) .relay-table-state{min-height:180px;padding:24px}}
@media(max-width:680px){html:root .api-console-body .relay-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}html:root .api-console-body .relay-metrics article{min-width:0;padding:16px;min-height:110px}html:root .api-console-body .relay-metrics strong{overflow-wrap:anywhere;font-size:27px}html:root .api-console-body .relay-head-actions{display:flex;flex-direction:row;width:100%;justify-content:flex-start}html:root .api-console-body .relay-head-actions .relay-button{flex:0 1 auto;min-width:0}}

/* Use the workspace width instead of centering a capped document column. */
html:root .api-console-body .relay-view,html:root .api-console-body .relay-page{width:100%;max-width:none;margin-inline:0;min-width:0}
@media(min-width:981px){html:root .api-console-body .relay-main{padding:36px 28px 56px}html:root .api-console-body .relay-topbar{padding-inline:28px}}
html:root .api-console-body .relay-panel-wide,html:root .api-console-body .relay-table-wrap{max-width:100%;min-width:0}