/* Step 3.2: lab UI and extra color-state samples; same geometry in A and B. */
.ty-lab button:focus-visible,.ty-dialog button:focus-visible,.ty-dock button:focus-visible{outline:2px solid #657E72!important;outline-offset:0!important;box-shadow:none!important}
.cs-states-screen{max-width:1440px;margin:0 auto}
.cs-state-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cs-state-panel{padding:20px;min-width:0}
.cs-state-panel>header{margin-bottom:20px}.cs-state-panel>header h2{margin-bottom:6px}
.cs-state-wide{grid-column:1/-1}
.cs-action-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 20px}
.cs-state-panel .fav{position:static;flex:none}
.cs-state-panel .form-label{display:grid;gap:8px}.cs-select-field{margin-top:18px}
.cs-state-panel select.field{appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6577' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.cs-state-table{min-width:640px;table-layout:auto}.cs-state-table th,.cs-state-table td{text-align:left;padding:14px 16px}
.cs-state-table th:first-child{width:92px}.cs-state-table th:last-child,.cs-state-table td:last-child{text-align:right}
.cs-state-table input{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}
.cs-state-table tr.cs-row-selected,.cs-state-table tr.cs-row-selected:hover{background:var(--soft)!important}
.cs-select-action[aria-pressed=true]{color:var(--soft-text)!important;background:var(--soft)!important;border-color:var(--soft-line)!important}
.cs-message-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cs-message-grid .inline-message{display:flex;align-items:flex-start;gap:10px;margin:0;padding:16px;border:1px solid transparent;border-radius:10px}.cs-message-grid .inline-message p{margin-top:4px;font-size:13px;line-height:20px;color:inherit}.cs-message-grid .inline-message strong{font-size:14px;line-height:21px;font-weight:600}
.cs-spec-dialog{width:790px}.cs-spec-modes{display:flex;gap:8px;margin-bottom:18px}.cs-spec-modes [aria-pressed=true]{background:#253541;color:white}
.cs-swatch-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px}.cs-swatch{display:flex;gap:10px;padding:10px;border:1px solid #E2E6E8;border-radius:7px;align-items:center;min-width:0}.cs-swatch i{display:block;flex:none;width:34px;height:34px;border:1px solid #0002;border-radius:7px}.cs-swatch b{font-size:12px;line-height:18px;font-weight:600;display:block}.cs-swatch code{font:12px/18px ui-monospace,monospace;color:#5E6A70}.cs-swatch span{min-width:0}.cs-font-heading{margin:22px 0 10px}.cs-source-note{font-size:12px!important}.cs-pass{color:#176B45!important}.cs-fail{color:#A33243!important}
.ty-spec-scroll td:last-child{white-space:nowrap}.cs-state-panel .inline-message.success{color:var(--success);background:var(--success-bg)}.cs-state-panel .inline-message.warning{color:var(--warning);background:var(--warning-bg)}.cs-state-panel .inline-message.info{color:var(--info);background:var(--info-bg)}.cs-state-panel .inline-message.error{color:var(--danger);background:var(--danger-bg)}
#productToast{position:fixed;z-index:10000;right:24px;bottom:24px;max-width:min(420px,calc(100vw - 32px));padding:15px 16px;display:flex;align-items:flex-start;gap:10px;border-radius:11px;color:white;background:#102B32;box-shadow:0 18px 50px #07142129,0 3px 10px #07142114;font:400 14px/21px var(--ui-font),Arial,sans-serif}
#productToast .cs-toast-copy{min-width:0;flex:1}#productToast strong{display:block;font-weight:600}#productToast p{font-size:13px;line-height:20px;margin-top:3px;color:inherit}#productToast .cs-toast-close{color:inherit;padding:0;min-width:24px;min-height:24px;display:grid;place-items:center;border:0;border-radius:5px;background:transparent}#productToast[data-tone=error]{background:var(--danger)}
html[data-color-inspect=true] [data-color-role]{outline:1px dashed #859B93!important;outline-offset:2px!important}
#contrastRows tr:hover{background:white}#contrastRows td:first-child{min-width:230px}
@media(max-width:900px){.cs-state-grid{grid-template-columns:1fr}.cs-state-wide{grid-column:auto}.ty-top-note{display:none}}
@media(max-width:620px){.cs-message-grid,.cs-swatch-list{grid-template-columns:1fr}.cs-state-panel{padding:16px}.ty-options{margin-left:0;flex-wrap:wrap}.ty-bottom{align-items:flex-start}.ty-bottom #scopeNote{max-width:74%}#productToast{bottom:16px;right:16px}.ty-toggle button{padding:4px 8px;font-size:12px}.ty-dialog footer{flex-wrap:wrap}}