/* Builder chrome only: public template styles and saved palettes are untouched. */
/* Native focus and reveal scrolling must settle before the next palette click. */
html:has(.svx-wizard){scroll-behavior:auto}
.svx-design-preview,.design-live-preview{color:#142741;font:inherit;--design-line:#d8e2ef;--design-blue:#225bc8;box-sizing:border-box}
.svx-design-preview *,.design-live-preview *{box-sizing:border-box}
.svx-design-preview button,.design-live-preview button{font:inherit;cursor:pointer;min-height:44px;border-radius:10px;padding:10px 16px;border:1px solid var(--design-line);font-weight:600}
.svx-design-preview button:focus-visible,.design-live-preview button:focus-visible{outline:3px solid #326cd5;outline-offset:3px}
.svx-design-preview button:disabled{cursor:default;opacity:1}
.design-primary-button{background:#173866!important;color:#fff!important;border-color:#173866!important}
.design-primary-button:hover:not(:disabled){background:#245393!important}
.design-primary-button[aria-pressed=true]{background:#e5efe8!important;color:#215236!important;border-color:#bdd4c4!important}
.design-text-button,.design-back-button,.design-icon-button{background:#fff;color:#183b68}
.design-device-controls{display:flex;gap:4px;flex:none;border:1px solid var(--design-line);border-radius:12px;padding:3px;background:#f4f7fb}
.design-device-controls button{border:0;padding:7px 14px;background:transparent;color:#405778}
.design-device-controls button[aria-pressed=true]{background:#fff;color:#132e50;box-shadow:0 2px 6px #14274115}
.svx-design-preview{width:min(1480px,calc(100vw - 32px));max-width:none;height:calc(100dvh - 32px);max-height:none;padding:0;border:1px solid var(--design-line);border-radius:20px;box-shadow:0 30px 100px #10213d55;background:#f0f3f8;overflow:hidden}
.svx-design-preview[open]{display:flex;flex-direction:column}
.svx-design-preview::backdrop{background:#10213da8}
.design-dialog-header{display:flex;align-items:center;gap:22px;padding:16px 22px;background:white;flex:none;border-bottom:1px solid var(--design-line)}
.design-dialog-header>div{flex:1;min-width:0}
.design-dialog-header h2{font-size:21px;line-height:1.35;margin:0 0 5px}
.design-dialog-header p{font-size:13px;line-height:1.6;margin:0;color:#536783;max-width:800px}
.design-icon-button{font-size:24px!important;width:44px;padding:0!important;flex:none}
.design-dialog-toolbar{display:flex;gap:20px;align-items:center;padding:8px 22px;background:white;border-bottom:1px solid var(--design-line);flex:none;font-size:13px}
.design-dialog-toolbar>span{margin-inline-start:auto;color:#526783}
.design-preview-window{position:relative;overflow:hidden;min-height:0;background:#e7ecf3;isolation:isolate}
.design-preview-window iframe{position:absolute;top:0;transform-origin:top left;border:0;background:white;max-width:none!important;display:block}
.svx-design-preview>.design-preview-window{flex:1;width:calc(100% - 32px);margin:0 auto}
.design-preview-status{min-height:25px;display:flex;align-items:center;justify-content:center;gap:12px;color:#315170;font-size:12px;line-height:1.5;padding:3px 12px;flex:none}
.design-preview-status.is-ready{color:#3c6551}
.design-preview-status [hidden]{display:none!important}
.design-dialog-footer{display:flex;gap:20px;align-items:center;justify-content:space-between;background:#fff;border-top:1px solid var(--design-line);padding:12px 22px;flex:none}
.design-dialog-footer>button{flex:none;min-width:200px}
.design-sample-note{font-size:12px!important;line-height:1.65!important;color:#536783;margin:0!important}
.svx-wizard[data-wizard-step="3"] .wizard-card{max-width:1200px}
.wizard-brand-layout{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr);gap:28px;align-items:start;margin-block-start:24px;overflow-anchor:none}
.svx-guided.svx-wizard .wizard-brand-layout .guided-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* Keep absolute screen-reader labels inside the scrollable palette cards. */
.wizard-brand-layout .guided-palette-choice{position:relative}
.palette-picker{position:relative;min-width:0}
.palette-filters{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.svx-guided .palette-filters button{display:flex;align-items:center;gap:6px;min-height:38px;padding:6px 10px;border:1px solid #d4deeb;border-radius:24px;background:#fff;color:#36506e;font-size:12px;line-height:1.4}
.palette-filters button span{font-size:11px;opacity:.8}
.svx-guided .palette-filters button[aria-pressed=true]{background:#163961;border-color:#163961;color:#fff}
.svx-guided.svx-wizard .palette-picker .palette-choice-tile{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-height:110px;margin:0;padding:12px;border:2px solid #dce4ed;border-radius:12px;background:#fff;color:#162e4d;font-size:13px;text-align:start;box-shadow:none;cursor:pointer;transition:border-color .12s,background-color .12s}
.svx-guided.svx-wizard .palette-picker .palette-choice-tile:hover{background:#f3f7fd;border-color:#96b0d2;transform:none}
.svx-guided.svx-wizard .palette-picker .palette-choice-tile.is-selected{border-color:#225aa4;background:#edf4ff}
.palette-choice-tile .guided-swatches{display:flex;gap:3px;width:100%;margin:0}
.palette-choice-tile .guided-swatches>span{flex:1;min-width:0;height:23px;border-radius:5px;border:1px solid #14274122}
.palette-choice-title{display:block;min-height:38px;font-size:13px;font-weight:700;line-height:1.5;overflow-wrap:anywhere}
.palette-choice-caption{display:flex;align-items:center;justify-content:space-between;gap:5px;color:#526781;font-size:10px;line-height:1.4}
.palette-choice-caption>[data-palette-check]{font-size:16px;color:#225aa4;min-width:14px}
.palette-scroll-hint{display:none;margin:6px 0 0;font-size:12px}
.palette-picker:not([data-palette-filter-active="all"]) .palette-scroll-hint{display:none}
@media(max-width:700px){.palette-scroll-hint{display:block}.palette-filters{gap:5px}.svx-guided .palette-filters button{font-size:11px;padding:5px 8px}.svx-guided.svx-wizard .palette-picker .palette-choice-tile{padding:10px;min-height:112px}}
.svx-guided.svx-wizard .wizard-brand-layout .guided-choice-body{padding:12px}
.svx-guided.svx-wizard .wizard-brand-layout .guided-choice-body h4{font-size:14px;min-height:42px;line-height:1.5;margin:10px 0}
.svx-guided.svx-wizard .wizard-brand-layout .guided-choice-body button{font-size:13px;min-height:44px;padding:8px;width:100%}
.svx-guided.svx-wizard .wizard-brand-layout .current-design{margin-bottom:18px}
.design-live-preview{position:sticky;top:var(--design-sticky-top,96px);border:1px solid var(--design-line);border-radius:16px;background:#f5f8fc;overflow:hidden}
.design-live-preview>header{padding:18px 18px 10px;background:white}
.design-live-preview h3{font-size:19px;margin:0 0 8px}
.design-live-preview header p{font-size:13px;margin:0;line-height:1.7;color:#526783}
.design-live-toolbar{padding:8px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff;font-size:12px}
.design-live-toolbar strong{min-width:0;overflow-wrap:anywhere}
.design-live-toolbar .design-device-controls button{padding:6px 9px;font-size:12px}
.design-live-preview .design-preview-window{height:430px;width:100%}
.design-live-preview>.design-sample-note{padding:12px 16px}
.design-live-preview>.design-primary-button{display:block;width:calc(100% - 28px);margin:0 14px 14px;font-size:13px}
.svx-guided.svx-wizard .wizard-template-actions{display:grid;gap:8px}
.svx-guided.svx-wizard .wizard-template-actions .btn{min-height:44px}
@media(max-width:900px){.wizard-brand-layout{grid-template-columns:1fr}.design-live-preview{position:relative;top:auto;grid-row:1}.design-live-preview .design-preview-window{height:360px}}
@media(max-width:700px){
 .svx-design-preview{width:100vw;height:100dvh;border:0;border-radius:0;margin:0}
 .design-dialog-header{gap:10px;padding:12px}
 .design-dialog-header h2{font-size:17px}
 .design-dialog-header p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px;line-height:1.5}
 .design-back-button{font-size:12px!important;padding:8px 10px!important}
 .design-dialog-toolbar{gap:10px;padding:8px 12px;flex-wrap:wrap}
 .design-dialog-toolbar>span{display:none}
 .design-dialog-toolbar>strong{font-size:12px;flex:1;min-width:90px}
 .svx-design-preview>.design-preview-window{width:100%}
 .design-dialog-footer{display:grid;gap:8px;padding:12px}
 .design-dialog-footer>button{width:100%;min-width:0}
 .design-dialog-footer .design-sample-note{font-size:11px!important}
 .wizard-brand-layout{display:flex;flex-direction:column;gap:20px}
 .wizard-brand-layout>.guided-palettes{width:100%}
 .wizard-brand-layout .palette-picker .current-design{margin-bottom:12px;padding:8px}
 .wizard-brand-layout .palette-picker .current-design__values{display:grid;grid-template-columns:1fr 1.2fr;gap:8px}
 .wizard-brand-layout .palette-picker .current-design__values>div{min-width:0}
 .wizard-brand-layout .palette-picker .guided-component-heading h3{margin-block:0 6px;font-size:20px}
 .wizard-brand-layout .palette-picker .guided-component-heading p{margin-block:0;font-size:12px;line-height:1.6}
 .design-live-preview{position:relative;top:auto;width:100%;box-shadow:0 6px 24px #18314e12}
 .design-live-preview .design-preview-window{height:340px}
 .design-live-preview>header{padding:8px 12px 0}
 .design-live-preview h3{font-size:15px;margin:0}
 .design-live-preview header p{display:none}
 .design-live-preview>.design-sample-note{font-size:10px!important;line-height:1.5!important;padding:6px 10px}
 .design-live-preview>.design-primary-button{margin-bottom:8px;min-height:44px;padding:6px 10px;font-size:12px}
 .svx-guided.svx-wizard .wizard-brand-layout .guided-choice-grid{display:flex;overflow-x:auto;gap:12px;padding:4px 3px 16px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
 .wizard-brand-layout .guided-palette-choice{flex:0 0 152px;scroll-snap-align:start}
 .wizard-brand-layout [data-guided-palette]{scroll-margin-block:130px}
 .svx-guided.svx-wizard .wizard-template-grid{grid-template-columns:1fr}
 .svx-guided.svx-wizard .wizard-template>img{height:180px}
 .svx-guided.svx-wizard .wizard-template p{display:block;min-height:0}
 .svx-guided.svx-wizard .wizard-template-actions{grid-template-columns:1fr 1fr}
 .svx-guided.svx-wizard .wizard-template h3{font-size:18px}
}