.component-guide-open{display:block;width:100%;min-height:48px;padding:12px 15px;margin:18px 0;text-align:left;background:#e5eade;color:#284735;border:1px solid #b6c4ad;border-radius:4px;font-size:12px;line-height:1.5}
#componentGuideDialog{width:min(930px,calc(100% - 48px));max-height:calc(100dvh - 48px);padding:32px 42px;background:#f5f4ee;overscroll-behavior:contain}
.component-guide-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.component-guide-heading h2{font-size:38px;margin:12px 0 0}.component-guide-heading button{min-width:70px;min-height:44px}.component-guide-heading .small-label{font-size:10px}#componentGuideContext{margin:20px 0 22px;color:#5d6b5a;font-size:13px;line-height:1.6}
.component-guide-heading{position:sticky;top:-1px;z-index:3;background:#f5f4ee;padding:10px 0 14px;border-bottom:1px solid #d7dbcf}
.component-guide-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;border-bottom:1px solid #cbd0c3;padding-bottom:18px;margin-bottom:24px}.component-guide-tabs button{min-height:48px;background:transparent;color:#4a604f;border-radius:3px;font-size:13px;padding:10px}.component-guide-tabs button[aria-pressed=true]{background:#345542;color:#fff}
.guide-select{display:flex;flex-direction:column;gap:10px;margin:18px 0 30px;font-size:12px;color:#596b59}.guide-select select{min-height:48px;height:auto;width:100%;max-width:100%;min-width:0;font-size:14px;padding:12px 34px 12px 12px;text-overflow:ellipsis}.guide-select span{line-height:1.6}
#componentGuideBody h2{font-size:31px;line-height:1.15;margin:0 0 16px}#componentGuideBody p,#componentGuideBody li{font-size:14px;line-height:1.85;overflow-wrap:anywhere}#componentGuideBody .guide-lead{font-size:16px;color:#435843;margin-bottom:30px}#componentGuideBody h3{font-size:13px;margin:28px 0 12px;color:#31503c}#componentGuideBody ul,#componentGuideBody ol{padding-left:21px}#componentGuideBody li{margin-bottom:13px}#componentGuideBody a{display:block;width:fit-content;max-width:100%;min-height:44px;padding:12px 0;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.guide-items{margin:30px 0}.guide-items details{border-top:1px solid #ccd0c3;padding:4px 0}.guide-items summary,.guide-sources summary{font-size:14px;line-height:1.6;min-height:48px;padding:13px 0;cursor:pointer}.guide-items details[open]{padding-bottom:20px}.guide-field p{margin-top:0}.guide-field h3{font-size:12px}.guide-caution{background:#ede7d8;border-left:3px solid #a48b5b;padding:15px 19px;margin:22px 0!important;color:#615239}.guide-tag{display:inline-block;background:#e1e8dc;color:#36533e;padding:8px 12px;border-radius:3px;font-size:12px!important}.guide-mpn{font-family:ui-monospace,monospace;font-size:13px!important}.guide-sources{margin:30px 0 24px;border-top:1px solid #cbd0c3}.component-guide-footer{font-size:12px;line-height:1.8;color:#687362;border-top:1px solid #cbd0c3;margin-top:35px;padding-top:22px}
.connection-map{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin:32px 0}.connection-map>div{position:relative;background:#e5eade;border:1px solid #c1ccb9;padding:20px 17px;min-width:0}.connection-map>div:not(:last-child):after{content:'→';position:absolute;right:-15px;top:45%;color:#687753}.connection-map span{display:block;font-size:9px;letter-spacing:.08em;margin-bottom:16px;color:#65765f}.connection-map strong{font-size:14px;line-height:1.7;font-weight:500;display:block;overflow-wrap:anywhere}
@media(max-width:1023px){.component-guide-open{font-size:14px;min-height:52px}}
@media(max-width:600px){#componentGuideDialog{width:100%;height:100dvh;max-height:100dvh;max-width:100%;margin:0;border:0;border-radius:0;padding:22px 22px max(30px,env(safe-area-inset-bottom))}.component-guide-heading h2{font-size:30px}.component-guide-tabs{grid-template-columns:1fr 1fr;gap:7px}.component-guide-tabs button{font-size:14px}.guide-select select{font-size:16px}.connection-map{grid-template-columns:1fr;gap:20px}.connection-map>div{padding:17px}.connection-map>div:not(:last-child):after{content:'↓';top:auto;bottom:-20px;right:50%}.connection-map span{margin-bottom:8px}#componentGuideBody h2{font-size:29px}#componentGuideBody p,#componentGuideBody li{font-size:15px}#componentGuideBody a,.guide-items summary,.guide-sources summary{font-size:14px;min-height:48px}.component-guide-heading{align-items:flex-start}}