/* Implementation guides inherit the same semantic colors as the component shell. */
.implementation-guide{--guide-accent:var(--bluui-primary,#5941a0);min-width:0;line-height:1.7;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--bluui-text)}
.implementation-guide>h2{font-size:clamp(24px,2.7vw,32px);line-height:1.2;letter-spacing:-.035em;margin:10px 0 14px}
.implementation-guide>.eyebrow{font-size:10px;font-weight:750;letter-spacing:.14em;color:var(--guide-accent)}
.implementation-guide>p{max-width:78ch;color:var(--bluui-text-muted);font-size:14px;margin:0 0 24px}
.guide-platform-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bluui-text-muted);margin:26px 0 12px}
.guide-outline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0 0 26px;padding:14px;background:var(--bluui-surface-muted);border:1px solid var(--bluui-border);border-radius:12px}
.guide-outline a{display:flex;align-items:baseline;gap:10px;padding:8px 10px;color:var(--bluui-text);font-size:12px;font-weight:550;text-decoration:none;border-radius:6px}
.guide-outline a:hover{background:var(--bluui-surface);color:var(--guide-accent)}
.guide-outline span{color:var(--guide-accent);font:650 11px/1.5 ui-monospace,monospace}
.guide-steps{display:grid;gap:20px}
.guide-step{min-width:0;border:1px solid var(--bluui-border);border-radius:14px;background:var(--bluui-surface);overflow:hidden;scroll-margin-top:24px}
.guide-step-heading{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--bluui-border);background:var(--bluui-surface-muted)}
.guide-step-number{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border:1px solid color-mix(in srgb,var(--guide-accent) 24%,var(--bluui-border));border-radius:9px;background:var(--bluui-surface);color:var(--guide-accent);font:700 12px/1 ui-monospace,monospace}
.implementation-guide .guide-step h3{margin:0;font-size:18px;font-weight:650;line-height:1.4;letter-spacing:-.02em}
.guide-step-body{padding:22px 24px;min-width:0;font-size:14px}
.guide-step-body> :first-child{margin-top:0}.guide-step-body> :last-child{margin-bottom:0}
.guide-step-body p,.guide-step-body li{color:var(--bluui-text-muted)}
.guide-step-body p{margin:14px 0;max-width:90ch}.guide-step-body li+li{margin-top:9px}
.guide-step-body a,.guide-availability a{color:var(--guide-accent);text-underline-offset:3px}
.implementation-guide code{font-size:.88em;overflow-wrap:anywhere;color:var(--bluui-text)}
.implementation-guide :is(p,li,td,summary) code{background:var(--bluui-surface-muted);border-radius:4px;padding:2px 5px}
.implementation-guide details{border:1px solid var(--bluui-border);border-radius:9px;margin:16px 0;background:var(--bluui-surface);overflow:hidden}
.implementation-guide details>summary{display:list-item;list-style:disclosure-closed;padding:15px 18px;cursor:pointer;color:var(--bluui-text);font-size:13px;font-weight:600;line-height:1.6}
.implementation-guide details[open]>summary{list-style:disclosure-open;border-bottom:1px solid var(--bluui-border);background:var(--bluui-surface-muted)}
.implementation-guide details> :not(summary){margin:16px 18px}
.implementation-guide details .code-example{margin:16px 18px}
.implementation-guide .code-example,.implementation-guide .web-code{min-width:0;margin:18px 0;border:1px solid var(--bluui-border);border-radius:9px;overflow:hidden;background:var(--bluui-surface-muted)}
.implementation-guide :is(.code-example__header,.web-code-label){display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--bluui-border);font:600 11px/1.5 var(--bluui-font-body,system-ui);color:var(--bluui-text-muted);background:var(--bluui-surface)}
.implementation-guide pre{margin:0;padding:20px;overflow:auto;max-width:100%;color:var(--bluui-text);background:var(--bluui-surface-muted);font-size:12px;line-height:1.8;tab-size:2}
.implementation-guide pre code{white-space:pre;overflow-wrap:normal;background:none;padding:0;font-size:inherit}
.guide-recipes{display:grid;gap:14px}.guide-recipe{padding:20px;border:1px solid var(--bluui-border);border-radius:10px;background:var(--bluui-surface)}
.implementation-guide .guide-recipe h4{margin:0 0 12px;font-size:16px;line-height:1.4;color:var(--bluui-text)}
.implementation-guide .guide-recipe p{margin:12px 0 0}.guide-controls{display:flex;flex-wrap:wrap;gap:6px;font-size:12px}
.implementation-guide .guide-controls code{padding:4px 7px;border:1px solid var(--bluui-border);font-size:11px}
.implementation-guide .guide-check{padding:12px 14px;margin-top:16px!important;border-radius:7px;background:var(--bluui-surface-muted);font-size:12px}.guide-check strong{color:var(--bluui-text)}
.guide-checks{padding-left:20px}.implementation-guide .web-api-table-scroll{margin:20px 0}.implementation-guide .web-api-table{table-layout:auto;font-size:12px;min-width:600px}.implementation-guide .web-api-table th{width:auto!important}.implementation-guide .web-api-table td{vertical-align:top}
.guide-related{margin-top:24px!important;border:1px solid var(--bluui-border);border-radius:12px;background:var(--bluui-surface);padding:18px 22px}.guide-related>summary{cursor:pointer;font-size:14px;font-weight:600}.guide-related .implementation-guide{margin-top:24px}
.guide-availability{padding:24px;border:1px solid var(--bluui-border);border-radius:12px;background:var(--bluui-surface);font-size:14px}.guide-availability h3{margin-top:0;font-size:20px}
.implementation-guide :is(a,summary,button):focus-visible{outline:3px solid var(--guide-accent);outline-offset:3px}
@media(max-width:700px){.guide-outline{grid-template-columns:1fr;padding:10px}.guide-step-heading{padding:16px;gap:12px}.implementation-guide .guide-step h3{font-size:16px}.guide-step-body{padding:16px;font-size:13px}.guide-recipe{padding:15px}.implementation-guide pre{padding:14px;font-size:11px}.implementation-guide details>summary{padding:13px}.implementation-guide details> :not(summary){margin:14px}.implementation-guide details .code-example{margin:14px}.guide-related{padding:16px}.guide-step{border-radius:11px}}
@media(forced-colors:active){.guide-step-number,.guide-controls code{border-color:CanvasText}.guide-outline a:focus-visible{outline-color:Highlight}}

.blu-showcase .implementation-guide>h2{font-size:clamp(24px,2.7vw,32px);margin:10px 0 14px;line-height:1.2;letter-spacing:-.035em}

/* Keep scrollable tables inside disclosure cards symmetrically inset. */
.implementation-guide details>.web-api-table-scroll{margin:16px 18px;width:auto;max-width:calc(100% - 36px)}
@media(max-width:700px){.implementation-guide details>.web-api-table-scroll{margin:14px;max-width:calc(100% - 28px)}}