/* Workspace chrome: compact navigation, immediate color output, optional detail. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:16px;z-index:20;padding:12px 18px;border-radius:8px;background:#263220;color:white;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.app .header{height:auto;min-height:64px;margin:0;padding:10px 0;gap:20px;flex-wrap:wrap}
.header .brand-logo{width:190px}
.header nav{align-items:center;gap:22px;margin-left:auto;max-width:100%;flex-wrap:wrap;justify-content:flex-end}
.header nav #about{display:block}
.header nav button,.header summary{font-size:13px;min-height:40px}
.header summary{display:flex;align-items:center;cursor:pointer;gap:8px;list-style:none}
.header summary::after{content:'⌄';font-size:14px}
.header summary::-webkit-details-marker{display:none}
.account-menu{position:relative}
.account-menu .account-bar{position:absolute;z-index:6;right:0;top:100%;width:240px;display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:4px 0 0;padding:14px;border:1px solid #c7d1bd;border-radius:10px;background:#f8faf5;box-shadow:0 8px 28px #2632201c;color:#34422d}
.account-menu:not([open]) .account-bar{display:none}
.account-menu .account-bar button{text-align:left;margin:0}
.account-menu #account-email{max-width:100%;font-size:13px;overflow-wrap:anywhere;white-space:normal;margin-bottom:4px}
.project-toolbar{display:grid;grid-template-columns:minmax(160px,1fr) auto minmax(0,1fr);align-items:center;gap:20px;margin:0 0 20px;padding:12px 0;background:none;border:0;border-top:1px solid #d5dacf;border-bottom:1px solid #d5dacf;border-radius:0}
.project-toolbar>div:first-child{max-width:none;gap:3px}
.project-toolbar .project-actions{justify-content:flex-end;gap:12px;flex-wrap:wrap;width:auto}
.project-toolbar .studio-button{padding:9px 16px;min-height:40px;font-size:13px;box-shadow:none}
.project-toolbar .text-button{font-size:13px;min-height:40px}
#active-project{font-size:14px;max-width:100%;line-height:1.4}
#save-status{font-size:11px}
.project-toolbar .workspace-tabs{gap:2px;margin:0;padding:3px;border-radius:9px}
.project-toolbar .workspace-tabs button{padding:8px 18px;font-size:13px;min-height:36px;border-radius:6px}
.theme-entry{padding:0;margin:0 0 20px;border:0;gap:28px;align-items:center;flex-wrap:wrap;flex-direction:row}
.quick-color{position:relative;min-width:190px}
.quick-color>.eyebrow{font-size:11px;color:#5d6955;letter-spacing:1px;margin:0 0 6px}
.quick-color .color-entry{display:flex;align-items:center;gap:10px;padding:6px 10px;border:1px solid #cbd2c5;border-radius:8px;background:#f8faf5;min-height:44px}
.quick-color .color-dot{width:28px;height:28px}
.quick-color #hex{font-size:20px;width:120px;max-width:100%;background:transparent}
.quick-color .input-error{position:static;display:block;margin-top:5px;max-width:250px;line-height:1.5}
.quick-color .input-error:empty{display:none}
.theme-entry .harmony-tools{margin:0;padding:0;border:0;display:flex;align-items:flex-end;gap:12px;flex-direction:row}
.theme-entry .harmony-choice{display:flex;flex-direction:column;gap:6px;align-items:stretch;width:auto;min-width:0;flex:1}
.theme-entry .harmony-choice .eyebrow{font-size:11px;color:#5d6955;letter-spacing:1px}
.theme-entry .harmony-choice select{margin:0;padding:9px 30px 9px 12px;font-size:15px;min-height:44px;border:1px solid #cbd2c5;border-radius:8px;background:#f8faf5;min-width:160px;width:100%}
.ui-preview,.dashboard-preview{font-family:var(--pack-body,Arial,Helvetica,sans-serif)}
.ui-preview h3,.ui-preview h4,.ui-preview .sample-nav strong,.dashboard-preview h3,.dashboard-preview h4,.dashboard-preview .dash-brand{font-family:var(--pack-display,var(--pack-body,Arial,Helvetica,sans-serif))}
.theme-entry-actions{margin-left:auto;align-self:center;gap:12px;align-items:center}
.theme-entry-actions .studio-button{font-size:13px;min-height:44px;box-shadow:none}
.palette-section{margin-top:0}
.palette-heading{margin-bottom:12px}
.palette-heading::after{content:'Click a swatch to copy';font-size:12px;color:#5d6955}
.palette-section .swatch{box-shadow:0 1px 2px #00000015}
.palette-adjustments{margin:22px 0;border:1px solid #d0d7c9;border-radius:10px;background:#f3f5ef}
.palette-adjustments>summary{padding:14px 18px;font-size:14px;cursor:pointer}
.palette-adjustments>summary span{font-size:12px;color:#626e59;margin-left:12px}
.palette-adjustments .controls{margin:0 18px;border:0;border-top:1px solid #d5dacf;border-radius:0;box-shadow:none;padding:22px 0;grid-template-columns:1fr 1fr 1fr}
.palette-adjustments .control-column{padding:0 22px;min-width:0}
.palette-adjustments .control-column:first-child{padding-left:0}
.palette-adjustments .control-column:last-child{padding-right:0}
.channel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;font-size:13px}
.palette-adjustments .large-select{font-size:19px;margin-top:12px}
.palette-adjustments .eyebrow{color:#5d6955;font-size:11px;letter-spacing:1px}
.palette-adjustments .contrast-header,.palette-adjustments .count-label{margin-top:22px}
.palette-adjustments #contrast-value,.palette-adjustments #count{font-size:24px}
.palette-adjustments .stepper{gap:18px}
.palette-adjustments .stepper button{width:36px;height:36px;font-size:24px;box-shadow:none;background:#fff;border:1px solid #cbd2c5;border-radius:8px}
.palette-adjustments .harmony-actions{padding:0 18px 12px;justify-content:flex-start;gap:20px}
.palette-adjustments .wheel-details{margin:0;padding:0 18px 16px}
.has-imported-theme .quick-color,.has-imported-theme #palette-adjustments,.has-imported-theme #palette-svg-actions{display:none}
.has-imported-theme .theme-entry .harmony-choice:not(.pack-choice){display:none}
.has-imported-theme .theme-entry .harmony-tools{display:flex}
.has-imported-theme .theme-entry{justify-content:flex-end}
.has-imported-theme .theme-entry-actions{margin-left:0}
.has-imported-theme .theme-entry #undo-import{max-width:240px}
.export-actions{flex-wrap:wrap;align-items:center;margin:18px 0}
.export-actions .small-button{font-size:13px;min-height:40px;padding:8px 12px;box-shadow:none;border:1px solid #cad3c2}
.export-actions .text-button{font-size:13px;min-height:40px}
.export-dialog{width:min(960px,calc(100% - 32px));max-height:90vh;overflow:auto;overscroll-behavior:contain}
.export-dialog>.dialog-heading{margin-bottom:24px}
.export-dialog .code-section{margin:0}
.export-dialog .export-heading{margin-bottom:18px}
.export-dialog .export-heading h2{display:none}
.export-dialog .export-heading .export-scope-label{margin-left:auto}
.export-dialog .code-box{max-height:42vh;min-height:200px}
.export-dialog .gradient-export>h2,.export-dialog .gradient-export>.eyebrow{display:none}
.export-dialog .gradient-export{min-width:0}
.export-dialog .gradient-export-actions{flex-wrap:wrap}
.export-dialog #gradient-code{box-sizing:border-box;width:100%}
summary:focus-visible{outline:2px solid #4b823b;outline-offset:4px;border-radius:4px}
@media(max-width:1000px){
 .project-toolbar{grid-template-columns:minmax(0,1fr) auto;gap:12px}
 .project-toolbar .project-identity{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:12px}
 .project-toolbar .project-actions{gap:10px}
}
@media(max-width:650px){
 .app .header{padding:8px 0;min-height:60px;gap:4px 12px}
 .header .brand-logo{width:165px}
 .header nav{gap:14px}
 .header nav button,.header summary{font-size:12px}
 .header nav #about{display:block}
 .project-toolbar{margin-bottom:16px;padding:10px 0;gap:10px}
 .project-toolbar .project-actions{gap:8px}
 .project-toolbar .studio-button{padding:8px 12px;font-size:12px;min-height:40px}
 .project-toolbar .text-button{font-size:12px}
 .project-toolbar .project-identity{grid-column:1;grid-row:1;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
 .project-toolbar #active-project{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .project-toolbar .project-actions{grid-column:2;grid-row:1}
 .project-toolbar .workspace-tabs{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
 .project-toolbar .workspace-tabs button{padding:8px 6px;font-size:12px}
 .project-toolbar #share .share-icon{display:none}
 .theme-entry{gap:12px;align-items:flex-end;margin-bottom:20px}
 .quick-color{min-width:0;flex:1}
 .quick-color #hex{width:104px;font-size:18px}
 .theme-entry .harmony-tools{flex:1;min-width:0;flex-direction:row;margin-top:0;gap:8px}
 .theme-entry .harmony-choice select{width:100%;min-width:0;font-size:14px;padding:8px 22px 8px 8px}
 .theme-entry-actions{width:100%;margin-left:0;justify-content:flex-end}
 .theme-entry-actions .studio-button{min-height:36px;font-size:12px;padding:7px 12px}
 .palette-heading::after{font-size:11px}
 .role-panel #role-editors{grid-template-columns:1fr}
 .palette-adjustments>summary span{display:block;margin:6px 0 0 15px}
 .palette-adjustments .controls{grid-template-columns:1fr;gap:22px}
 .palette-adjustments .control-column{grid-column:auto;padding:0!important;border:0!important}
 .palette-adjustments .control-column+.control-column{padding-top:18px!important;border-top:1px solid #d5dacf!important}
 .palette-adjustments .harmony-actions{flex-wrap:wrap}
 .export-dialog{padding:20px}
 .export-dialog .export-heading .export-scope-label{width:100%;margin:0}
}
@media(max-width:370px){
 .header .brand-logo{width:150px}
 .header nav{gap:10px}
 .project-toolbar .workspace-tabs button{padding:8px 6px}
 .project-toolbar .project-actions{gap:6px}
 .project-toolbar .studio-button{padding:8px 10px}
}

.state-button{overflow-wrap:anywhere}
/* Keep select sizing and long labels consistent across browsers. */
.role-panel .role-select,.theme-entry .harmony-choice select{appearance:none;overflow:hidden;text-overflow:ellipsis;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%235d6955' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}