/* Presentation layer for the design library. Element UI tokens and vendor assets remain pinned. */
:root{--doc-ink:#15233c;--doc-muted:#53647c;--doc-blue:#2861ef;--doc-night:#131e34;--doc-paper:#f0f3f8}
body{background:var(--doc-paper);color:var(--doc-ink)}
.document-wrap{padding:0 44px 40px 296px;max-width:1660px;margin:0 auto}
.component-directory{width:236px;background:var(--doc-night);border:0;padding:32px 16px 40px;scrollbar-width:thin;scrollbar-color:#39445b transparent;color:#d7dfed}
.directory-brand{display:flex;gap:13px;align-items:center;padding:0 12px 36px;font-size:17px;font-weight:650;letter-spacing:1.3px;color:#fff}.directory-brand>div>span{display:block;font-size:9px;letter-spacing:2px;margin-top:4px;color:#a6b7d4;font-weight:500}.brand-grid{display:grid;grid-template-columns:repeat(2,11px);grid-template-rows:repeat(2,11px);gap:3px;transform:rotate(-9deg)}.brand-grid i{background:#5e8aff;border-radius:2px}.brand-grid i:nth-child(2){background:#b1c9ff}.brand-grid i:nth-child(3){background:#3754c1}.brand-grid i:last-child{background:#edf3ff}
.directory-title{font-size:12px;letter-spacing:1px;color:#c5d1e4;padding:0 12px 14px}.directory-title>span{background:#29364e;color:#c5d1e4;font-size:10px;padding:0 6px;line-height:18px}.directory-featured{border-color:#2b3750;padding-bottom:18px;margin-bottom:4px}.component-directory h2{color:#8093b2;font-size:11px;padding-top:24px;letter-spacing:.6px}.component-directory button{font-size:13px;color:#bdcbe1;padding:9px 12px;line-height:21px;border-radius:6px}.component-directory button span{color:#829cbe}.component-directory button:hover{background:#22324f;color:#fff}.component-directory button.selected,.component-directory button[aria-pressed=true]{background:#2c5ce6;color:#fff;box-shadow:none}.component-directory button.selected span{color:#d4dfff}
.doc-header{height:72px;min-height:0;background:transparent;margin:0 0 18px;border-bottom:1px solid #dbe2ed}.studio-breadcrumb{font-size:13px;font-weight:500;color:#263850}.studio-breadcrumb span{margin:0 12px;color:#8d9aad}.studio-version{font-size:12px;color:#53627b}.studio-version b{font-weight:600;color:#253958}.version-tag{background:#e3e9f3;border-radius:4px;padding:2px 7px;font-size:10px;margin-left:4px}
.findbar{margin:0 0 12px;background:#fff;border:1px solid #dce3ef;border-radius:8px;min-height:48px;padding:0 16px;box-shadow:0 3px 8px #233d7210}.findbar .search-box{height:48px}.search-box input{color:#243550;font-size:14px}.search-box input::placeholder{color:#71829b}.findbar:focus-within{border-color:#5485ef;box-shadow:0 0 0 3px #dce8ff}.findbar>span{color:#66778f;font-size:11px}.category-list{margin:0 0 20px;padding:0;gap:3px;border:0}.category-chip{font-size:12px;color:#51637f;padding:5px 9px}.category-chip.active{background:#dde7ff;color:#2458c9;font-weight:600}.category-chip:hover{background:#e4ebf7;color:#214fbb}#runtime-status{display:none}.section-head{margin:0 0 12px}.section-head h2{font-size:12px;color:#5b6d89}.section-head>span{color:#697b97}
.spec-card,.spec-card.wide{padding:0;background:transparent;border:0;box-shadow:none;margin-bottom:44px}.editorial-hero{display:grid;grid-template-columns:1fr 1fr;min-height:304px;border-radius:14px;overflow:hidden;background:#285be7;box-shadow:0 12px 28px #254a9c1a;margin-bottom:24px}.hero-copy{padding:30px 34px;background:#2456dd;color:#fff;position:relative}.hero-kicker{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.8px;font-weight:600;color:#c6d6ff;align-items:center}.hero-edition{font-size:10px;letter-spacing:1px;border:1px solid #6b8af0;border-radius:4px;padding:3px 5px}.editorial-hero .card-head{margin:24px 0 14px}.editorial-hero .card-head>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:15px}.editorial-hero .card-id{font-size:48px;line-height:1.05;font-weight:650;letter-spacing:-1.5px;color:white;margin:0}.editorial-hero .card-head h3{font-size:24px;line-height:32px;font-weight:500;color:#e3ebff;letter-spacing:0}.hero-statement{font-size:17px;line-height:28px;font-weight:500;color:#fff;margin-bottom:3px}.hero-description{font-size:13px;line-height:22px;color:#c3d4ff}.hero-tags{display:flex;gap:18px;margin-top:24px;font-size:10px;letter-spacing:.5px;color:#dce6ff}.hero-tags>span:before{content:'';display:inline-block;width:4px;height:4px;border-radius:1px;background:#97b7ff;vertical-align:middle;margin-right:7px}
.anatomy-panel{background:#e8efff;position:relative;display:flex;flex-direction:column;padding:25px 28px 20px;color:#213d75}.anatomy-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.2px;color:#526fa7}.anatomy-label>span:last-child{letter-spacing:1px}.anatomy-canvas{position:relative;flex:1;min-height:190px;margin:15px 5px;background-image:linear-gradient(#4978df0a 1px,transparent 1px),linear-gradient(90deg,#4978df0a 1px,transparent 1px);background-size:16px 16px;display:flex;align-items:center;justify-content:center}.anatomy-example{padding:22px 24px;border:1px dashed #6894ef;position:relative;background:#f7faff;box-shadow:0 8px 20px #38579512;max-width:calc(100% - 46px);border-radius:5px}.anatomy-example.buttons-anatomy .el-button{font-size:14px}.anatomy-example.input-anatomy{width:240px}.measure-top{position:absolute;top:0;left:0;right:0;text-align:center;font:10px/20px var(--ui-font-family, "PingFang SC", "Microsoft YaHei", sans-serif);color:#345c9e}.measure-side{position:absolute;right:-5px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%);font:10px/18px var(--ui-font-family, "PingFang SC", "Microsoft YaHei", sans-serif);color:#345c9e}.cross{position:absolute;width:9px;height:9px;background:linear-gradient(#93b1e9,#93b1e9) center/1px 9px no-repeat,linear-gradient(#93b1e9,#93b1e9) center/9px 1px no-repeat}.cross-tl{top:25px;left:10px}.cross-br{bottom:25px;right:10px}.anatomy-caption{display:flex;align-items:center;gap:6px;font-size:10px;color:#516a97;line-height:18px}.anatomy-caption>span:last-child{margin-left:auto;color:#365db1}.caption-dot{height:5px;width:5px;flex:none;background:#2a64ea;border-radius:50%}
.demo-area.studio-demo{padding:0;background:transparent;border:0}.token-strip{padding:0;gap:0;background:#fff;border:1px solid #dce4f0;border-radius:9px;margin:0 0 28px;overflow:hidden;box-shadow:0 2px 4px #254a9c05}.token-strip>span{padding:18px 22px;gap:7px;font-size:11px;color:#667a99;border-color:#e6ebf3}.token-strip b{font-size:20px;line-height:26px;font-weight:600;color:#203958}
.specimen-block{border-radius:10px;border:1px solid #dce4ef;margin:0 0 24px;background:#fff;box-shadow:0 3px 10px #233c6c05;scroll-margin-top:24px}.specimen-heading{padding:18px 24px;background:#fff;border-bottom:1px solid #e6ecf5;gap:18px}.specimen-heading h4{font-size:16px;font-weight:600;color:#1f3456;display:flex;align-items:center;gap:12px}.section-number{font:500 11px/26px var(--ui-font-family, "PingFang SC", "Microsoft YaHei", sans-serif);text-align:center;width:26px;flex:none;background:#e9f0ff;color:#3266d3;border-radius:6px}.specimen-heading>span{font-size:12px;color:#667d9b}.specimen-stage{padding:26px 24px}.specimen-row{gap:0;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}.specimen-row .state-cell{gap:22px;align-items:center;justify-content:center;padding:16px 12px 10px;border-right:1px solid #e8edf5;min-height:110px}.specimen-row .state-cell:last-child{border:0}.specimen-row .state-cell>span{font-size:11px;color:#627898;text-align:center}.specimen-stage .el-button{min-width:88px}.specimen-stage .el-button--small{font-size:14px}.specimen-stage .el-button--mini{min-width:76px}.input-showcase{gap:26px 40px}.input-showcase>label{font-size:13px;color:#2e4669;font-weight:500;gap:10px}.input-showcase small{font-weight:400;font-size:12px;color:#72839c}.pagination-feedback{padding-top:20px;color:#667c9a}.pagination-feedback b{font-weight:600;color:#2a5dcc}.pagination-states .pagination-example>span{font-size:12px;color:#5a708f}.pagination-states .pagination-example{border-bottom:1px dashed #e3e9f2;padding-bottom:22px}.pagination-states .pagination-example:last-child{border:0;padding-bottom:0}
/* Full-width documentation cards share one surface; nested component states keep their own colors. */
.spec-card>.card-summary,.spec-card>.color-contract,.spec-card>.spec-detail{box-sizing:border-box;width:100%;max-width:100%;margin:24px 0;padding:20px 24px;border:1px solid var(--ui-border);border-radius:10px;background:var(--ui-white);color:var(--ui-body)}
.spec-card>.card-summary{font-size:14px;line-height:24px;display:block;overflow:visible}.spec-detail>summary{color:#203652;font-size:15px;font-weight:600}.detail-action{font-size:11px;font-weight:400}.rules{font-size:13px;color:#4c6485;line-height:24px}.rules li:before{background:#5885d9}.acceptance summary{color:#3664aa}.doc-footer{border-color:#d7e0ef;margin-top:32px;color:#7185a1}.demo-area:not(.studio-demo){padding:20px 24px;background:var(--ui-white);border:1px solid var(--ui-border);border-radius:10px}.spec-card:not(:has(.editorial-hero))>.card-head{background:#1d3155;padding:28px 30px;border-radius:12px;color:#fff;margin-bottom:24px}.spec-card:not(:has(.editorial-hero))>.card-head h3{color:#fff;font-size:28px}.spec-card:not(:has(.editorial-hero))>.card-head .card-id{color:#92b6ff;font-size:11px;margin-bottom:12px}
@media(min-width:1660px){.document-wrap{padding-right:44px;padding-left:276px}.component-directory{left:0;width:236px}}
@media(max-width:1250px){.document-wrap{padding-left:250px;padding-right:28px}.component-directory{width:218px}.hero-copy{padding:26px}.anatomy-panel{padding:24px 20px 18px}.editorial-hero .card-id{font-size:40px}.editorial-hero .card-head h3{font-size:21px}.hero-statement{font-size:15px}.hero-tags{gap:12px}.pagination-anatomy{padding:16px 8px}.pagination-anatomy .el-pagination{transform:none;padding:2px 0}.pagination-anatomy .el-pagination .el-pager li{min-width:26px}.specimen-heading{padding:16px 20px}.specimen-stage{padding:22px 16px}.specimen-row .state-cell{padding:12px 8px}.token-strip>span{padding:16px}}
@media(max-width:1050px){.editorial-hero{grid-template-columns:1fr}.hero-copy{padding:25px 28px}.editorial-hero .card-head{margin:20px 0 14px}.editorial-hero .card-id{font-size:46px}.hero-tags{margin-top:18px}.anatomy-panel{padding:20px 24px}.anatomy-canvas{min-height:155px;max-width:440px;width:100%;margin:14px auto}.specimen-row{grid-template-columns:repeat(2,minmax(0,1fr))}.specimen-row .state-cell:nth-child(2){border:0}.specimen-row .state-cell:nth-child(n+3){border-top:1px solid #e8edf5}.specimen-heading{flex-direction:row;align-items:center}.specimen-heading>span{max-width:45%;font-size:11px}.input-showcase{gap:24px}.anatomy-example{padding:20px 24px}}
@media(max-width:760px){.document-wrap{padding:0 18px 26px}.component-directory{position:relative;width:auto;max-height:none;margin:0 -18px;padding:20px 18px 14px;overflow:visible}.directory-brand{padding:0 2px 18px;font-size:16px}.directory-brand>div>span{display:inline-block;margin:0 0 0 10px;font-size:8px;letter-spacing:1px}.brand-grid{grid-template-columns:repeat(2,8px);grid-template-rows:repeat(2,8px);gap:2px}.directory-title{display:none}.directory-featured{margin:0;padding:0;border:0;display:flex;gap:6px}.directory-featured button{font-size:13px;padding:8px}.component-directory>button,.component-directory h2{display:none}.doc-header{height:58px;margin-bottom:14px}.studio-breadcrumb{font-size:11px}.studio-version{font-size:10px;max-width:none;gap:5px}.studio-version i{display:block}.version-tag{display:none}.findbar{min-height:44px;padding:0 12px}.findbar .search-box{height:44px}.search-box input{font-size:12px}.findbar>span{font-size:10px}.category-list{gap:2px;margin-bottom:16px}.category-chip{font-size:11px;padding:4px 6px}.section-head{margin:0 0 10px}.editorial-hero{border-radius:10px;margin-bottom:20px}.hero-copy{padding:24px}.hero-kicker{font-size:8px}.editorial-hero .card-head{margin:22px 0 12px}.editorial-hero .card-id{font-size:42px}.editorial-hero .card-head h3{font-size:21px}.hero-statement{font-size:16px}.hero-description{font-size:12px}.hero-tags{font-size:9px;margin-top:18px}.anatomy-panel{padding:18px 22px}.anatomy-canvas{min-height:135px}.anatomy-example{padding:18px 24px}.anatomy-caption{font-size:9px}.token-strip{grid-template-columns:1fr 1fr;margin-bottom:22px}.token-strip>span{padding:15px 18px}.token-strip>span:nth-child(n+3){border-top:1px solid #e6ebf3}.token-strip b{font-size:18px}.specimen-heading{padding:16px;flex-direction:column;align-items:flex-start;gap:8px}.specimen-heading h4{font-size:15px;gap:10px}.specimen-heading>span{max-width:none;font-size:11px}.specimen-stage{padding:18px 12px}.specimen-row .state-cell{padding:15px 6px;gap:16px;min-height:105px}.specimen-row .state-cell>span{font-size:10px}.input-showcase{grid-template-columns:1fr;padding:2px 4px;gap:23px}.pagination-states .pagination-example{gap:12px}.pagination-states .pagination-example>span{min-width:0;display:block;width:100%}.pagination-feedback{gap:12px;flex-wrap:wrap}.spec-card>.card-summary,.spec-card>.color-contract,.spec-card>.spec-detail{padding:20px 16px}.spec-card:not(:has(.editorial-hero))>.card-head{padding:24px}.spec-card:not(:has(.editorial-hero))>.card-head h3{font-size:23px}.demo-area:not(.studio-demo){padding:20px 16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Fixed pseudo-state specimens supplement live interactions. */
.specimen-row.state-matrix{grid-template-columns:repeat(3,minmax(0,1fr))}.state-matrix .state-cell:nth-child(3){border-right:0}.state-matrix .state-cell:nth-child(n+4){border-top:1px solid #e8edf5}.preview-hover.el-button--primary{background:#66b1ff;border-color:#66b1ff}.preview-focus.el-button--primary{background:#409eff;border-color:#409eff;outline:2px solid #1765ad;outline-offset:3px}.preview-active.el-button--primary{background:#3a8ee6;border-color:#3a8ee6}.state-note{font-size:11px;color:#60799a;line-height:20px;margin:20px 8px 0!important;padding:12px 14px;background:#f1f5fc;border-radius:5px}@media(max-width:760px){.specimen-row.state-matrix{grid-template-columns:repeat(2,minmax(0,1fr))}.state-matrix .state-cell:nth-child(3){border-right:1px solid #e8edf5}.state-matrix .state-cell:nth-child(2n){border-right:0}.state-matrix .state-cell:nth-child(n+3){border-top:1px solid #e8edf5}}
/* Readability revision: primary content stays dark at normal weight. */
:root{--body:#303133;--input:#303133;--secondary:#606266}
.type-body{color:var(--body);font-weight:400}
.type-help{color:var(--secondary)}
.table-scroll table td,.table-scroll table td:nth-child(n+2),.demo-area .el-table,.value-pair,.wrap-sample{color:var(--body)}
.rules,.scenario-checklist,.card-summary,.spec-detail .acceptance>p:not(.help){color:var(--body)}
.el-input:not(.is-disabled)>.el-input__inner,.el-textarea:not(.is-disabled)>.el-textarea__inner,.specimen-stage .input-showcase .el-input:not(.is-disabled)>.el-input__inner{color:var(--input)}
.el-input.is-disabled>.el-input__inner,.specimen-stage .input-showcase .el-input.is-disabled>.el-input__inner,.el-textarea.is-disabled>.el-textarea__inner{color:#c0c4cc}
.el-select-dropdown__item:not(.selected):not(.is-disabled),.el-cascader-node:not(.is-active):not(.is-selectable):not(.in-active-path):not(.is-disabled),.demo-area .el-tree{color:var(--body)}
.input-showcase>label,.demo-grid>label,.date-demos>label{color:var(--body)}
.input-showcase small,.specimen-row .state-cell>span,.specimen-heading>span,.pagination-states .pagination-example>span,.state-note{color:var(--secondary)}
/* A document belongs to its component topic and remains available offline. */
.spec-document-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;margin-top:20px;background:#fff;border:1px solid #dce4ef;border-radius:9px}
.spec-document-description{display:flex;flex-direction:column;gap:6px;min-width:0}.spec-document-description>strong{font-size:14px;font-weight:600;color:#303133}.spec-document-description>span{font-size:12px;color:#606266;line-height:20px}.spec-document-buttons{display:flex;align-items:center;gap:10px;flex:none}.md-download{display:inline-flex;align-items:center;gap:6px;background:#2861ef;border:1px solid #2861ef;border-radius:4px;padding:8px 13px;color:#fff;font-size:14px;line-height:14px;white-space:nowrap}.md-download:hover{color:#fff;background:#4578f3;border-color:#4578f3;text-decoration:none}.spec-document-buttons .el-button{font-size:14px}.spec-document-buttons .el-button+.el-button{margin-left:0}@media(max-width:760px){.spec-document-actions{align-items:flex-start;flex-direction:column;padding:18px;gap:16px}.spec-document-buttons{width:100%;flex-wrap:wrap}}

/* Single component directory: preserve all topics on narrow screens. */
@media(max-width:760px){.component-directory .directory-topics{max-height:240px;overflow-y:auto;overscroll-behavior:contain}.component-directory .directory-topics h2{display:block;padding-top:12px}.component-directory .directory-topics button{display:block;min-height:32px}.component-directory .directory-topics [hidden]{display:none!important}}