/* maps-export.css — export studio (modal + design canvas), style editor, "Make it yours" guide.
   Nightwire tokens only (see assets/css/nightwire.css :root). Prefixes: .pwx-* export, .pws-* style, .pwg-* guide.
   Host geometry for #pwm-stylepanel / #pwm-canvas uses :where() (zero specificity) so the shell's maps.css wins. */

/* ---------- shared bits ---------- */
.pwx-eyebrow{display:block;font:400 10.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--purple);margin-bottom:5px}
.pwx-x{background:none;border:1px solid var(--line);color:var(--mute);width:32px;height:32px;border-radius:5px;font:400 20px/1 var(--mono);cursor:pointer;flex:0 0 auto}
.pwx-x:hover{color:var(--purple-hi);border-color:var(--line2)}
.pwx-btn{display:inline-flex;align-items:center;gap:8px;font:700 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  padding:10px 14px;border-radius:3px;border:1px solid var(--purple);background:none;color:var(--purple-hi);cursor:pointer;transition:.2s;white-space:nowrap}
.pwx-btn:hover{background:rgba(148,135,216,.12)}
.pwx-btn.primary{background:var(--purple);color:var(--bg)}
.pwx-btn.primary:hover{background:var(--purple-hi);box-shadow:0 0 22px rgba(148,135,216,.5)}
.pwx-btn.ghost{border-color:var(--line2);color:var(--txt2)}
.pwx-btn.ghost:hover{color:var(--purple-hi);border-color:var(--purple)}
.pwx-btn.danger{color:var(--hot);border-color:rgba(255,143,122,.45)}
.pwx-btn.danger:hover{background:rgba(255,143,122,.1);color:var(--hot)}
.pwx-btn:disabled,.pwx-btn.is-busy{opacity:.7;cursor:progress}
.pwx-btn .pwm-spin,.pwx-btn .pwx-spin,.pwx-copy .pwm-spin{width:13px;height:13px;flex:none;margin:0}
.pwx-btn .pwm-spin svg{width:100%;height:100%}
.pwx-btn.primary .pwm-spin .h{stroke:var(--bg)}.pwx-btn.primary .pwm-spin .t{stroke:rgba(8,7,13,.25)}
.pwx-btn.primary .pwx-spin{border-color:rgba(8,7,13,.25);border-top-color:var(--bg)}
.pwx-btn.is-done{border-color:var(--ok);color:var(--ok)}
.pwx-btn:focus-visible,.pwx-tab:focus-visible,.pwx-card:focus-visible,.pws-chip:focus-visible,.pwx-copy:focus-visible{outline:2px solid var(--purple-hi);outline-offset:2px}
.pwx-in,.pwx-sel,.pws-sel{font:400 13px/1.2 var(--mono);color:var(--txt);background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:4px;padding:8px 10px;min-width:0}
.pwx-sel,.pws-sel{padding-right:26px}
.pwx-in:focus,.pwx-sel:focus,.pws-sel:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(148,135,216,.2)}
.pwx-sel option,.pws-sel option{background:var(--panel2);color:var(--txt)}
.pwx-tag{font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);border:1px solid rgba(240,182,74,.4);border-radius:3px;padding:4px 6px}
.pwx-err{border:1px solid rgba(255,143,122,.5);border-left:3px solid var(--hot);background:rgba(255,143,122,.08);border-radius:4px;padding:10px 12px;margin:10px 0;color:var(--txt2);font-size:13.5px}
.pwx-err b{color:var(--hot);font-weight:600}
.pwx-err pre{margin:6px 0 0;font:400 12px/1.55 var(--mono);white-space:pre-wrap;word-break:break-word;color:var(--txt2)}
.pwx-warn{border-left:3px solid var(--amber);background:rgba(240,182,74,.07);border-radius:0 4px 4px 0;padding:8px 12px;margin:8px 0;font:400 11.5px/1.55 var(--mono);color:var(--mute);white-space:pre-wrap}
.pwx [hidden],.pws [hidden],.pwg-body [hidden],.pwx-dialog [hidden],.pwx-canvas-host[hidden],.pws-host[hidden]{display:none !important}

/* spinner (fallback when PWMaps.ui.spinner is absent) */
.pwx-spin{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid rgba(148,135,216,.25);border-top-color:var(--purple-hi);animation:pwx-rot .8s linear infinite;flex:0 0 auto;vertical-align:-3px}
.pwx-spin-xs{width:12px;height:12px;border-width:1.5px}
.pwx-spin-md{width:26px;height:26px;border-width:2.5px}
.pwx-spin-lg{width:40px;height:40px;border-width:3px}
@keyframes pwx-rot{to{transform:rotate(360deg)}}

/* determinate bars */
.pwx-bar{height:5px;border-radius:3px;background:rgba(148,135,216,.15);overflow:hidden;position:relative}
.pwx-bar i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--purple-deep),var(--teal));transition:width .18s ease-out;position:relative}
.pwx-bar i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:pwx-shine 1.2s linear infinite}
@keyframes pwx-shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* lazy vendor load: ring + copy + byte bar */
.pwx-load{display:grid;justify-items:center;gap:10px;padding:26px 18px;text-align:center;width:100%;max-width:360px;margin:auto}
.pwx-load-t{font:400 12.5px/1.45 var(--mono);color:var(--txt2)}
.pwx-load .pwx-bar{width:100%}
.pwx-load-n{font:400 11px/1 var(--mono);color:var(--mute);font-variant-numeric:tabular-nums}

/* ---------- studio ---------- */
.pwx{display:flex;flex-direction:column;gap:14px;color:var(--txt2);min-width:0}
.pwx-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.pwx-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--mute);font:400 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:12px 14px 11px;cursor:pointer;white-space:nowrap}
.pwx-tab:hover{color:var(--txt)}
.pwx-tab.on{color:var(--purple-hi);border-bottom-color:var(--purple-hi)}
.pwx-pane{display:flex;flex-direction:column;gap:12px;min-width:0;animation:pwx-in .22s ease-out}
@keyframes pwx-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.pwx-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pwx-card{text-align:left;display:grid;gap:6px;align-content:start;padding:14px;border-radius:5px;border:1px solid var(--line);background:rgba(14,12,23,.7);color:var(--mute);cursor:pointer;transition:.18s;font:400 12.5px/1.45 var(--body)}
.pwx-card b{font:400 16px/1 var(--mono);color:var(--txt)}
.pwx-card:hover{border-color:var(--line2);transform:translateY(-1px)}
.pwx-card[aria-checked="true"]{border-color:var(--purple);background:linear-gradient(160deg,rgba(148,135,216,.16),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(148,135,216,.35)}
.pwx-card[aria-checked="true"] b{color:var(--purple-hi)}
.pwx-meta{margin:0;font:400 11.5px/1.4 var(--mono);color:var(--mute)}
.pwx-opts{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.pwx-opt{display:inline-flex;align-items:center;gap:9px;font:400 12.5px/1.2 var(--mono);color:var(--txt2)}
.pwx-opt>span:first-child{color:var(--mute);letter-spacing:.04em}
.pwx-chk>span:first-child{color:var(--txt2)}
.pwx-opt input[type=checkbox],.pwx-opt input[type=radio]{accent-color:var(--purple);width:16px;height:16px;margin:0}
.pwx-opt input[type=range]{accent-color:var(--purple);width:110px}
.pwx-opt output{min-width:2.4em;color:var(--purple-hi);font-variant-numeric:tabular-nums}
.pwx-file{flex:1 1 260px}
.pwx-fwrap{display:flex;align-items:center;flex:1;min-width:0;gap:0}
.pwx-fwrap .pwx-in{flex:1;border-top-right-radius:0;border-bottom-right-radius:0}
.pwx-ext{font:400 13px/1 var(--mono);color:var(--mute);border:1px solid var(--line2);border-left:0;padding:9px 10px;border-radius:0 4px 4px 0;background:rgba(255,255,255,.02)}
.pwx-fine{margin:0;font-size:12.5px;color:var(--dim);line-height:1.5}
.pwx-fine a{color:var(--purple-hi)}
.pwx-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pwx-sep{flex:1}
.pwx-bar-row{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.pwx-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px;height:min(46vh,420px);min-height:260px}
.pwx-srcwrap{display:flex;min-width:0;min-height:0}
.pwx-src{flex:1;width:100%;min-height:0;resize:none;font:400 12px/1.6 var(--mono);color:var(--txt2);background:rgba(12,10,24,.92);border:1px solid var(--line);border-radius:5px;padding:12px 14px;tab-size:2;white-space:pre;overflow:auto}
.pwx-src:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(148,135,216,.18)}
.pwx-prev{position:relative;border:1px solid var(--line);border-radius:5px;background:
  radial-gradient(circle at 1px 1px,rgba(148,135,216,.12) 1px,transparent 1.2px) 0 0/16px 16px,rgba(8,7,13,.85);
  display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0;min-width:0;padding:10px}
/* Mermaid: render container and preview carry the export font (set per render as --pwx-mmd-font), so the
   boxes Mermaid measures and the text the preview shows match the exported file, never the page font */
.pwx-mmd-font{font-family:var(--pwx-mmd-font,"JetBrains Mono",Menlo,Consolas,"Courier New",monospace);letter-spacing:normal;font-weight:400}
.pwx-mmd-host{position:absolute;left:-12000px;top:0;width:4000px;visibility:hidden;pointer-events:none;font-size:13px;line-height:normal;letter-spacing:normal;font-weight:400}
/* preview viewer: the SVG at an explicit pixel size inside a pannable, scrollable view (never stretched) */
.pwx-prev.has-view,.pwx-live-out.has-view{display:block;padding:0;position:relative}
.pwx-view{position:absolute;inset:0;overflow:auto;display:flex;cursor:grab;overscroll-behavior:contain;outline:none}
.pwx-view:focus-visible{box-shadow:inset 0 0 0 2px var(--purple-hi)}
.pwx-view.is-dragging{cursor:grabbing;user-select:none}
.pwx-stage{margin:auto;padding:12px;flex:none}
.pwx-stage>svg{display:block;max-width:none;max-height:none}
.pwx-ztools{position:absolute;top:8px;right:8px;z-index:2;display:flex;align-items:center;gap:2px;padding:3px;border-radius:5px;border:1px solid var(--line2);background:rgba(8,7,13,.86);backdrop-filter:blur(3px)}
.pwx-zbtn{font:400 11.5px/1 var(--mono);color:var(--txt2);background:none;border:1px solid transparent;border-radius:3px;padding:6px 8px;min-width:30px;cursor:pointer}
.pwx-zbtn:hover{color:var(--purple-hi);border-color:var(--line2)}
.pwx-zbtn:focus-visible{outline:2px solid var(--purple-hi);outline-offset:1px}
.pwx-zpct{font:400 11px/1 var(--mono);color:var(--mute);min-width:4.4em;text-align:right;padding:0 6px 0 4px;font-variant-numeric:tabular-nums}
.is-small-text .pwx-zpct{color:var(--amber)}
.pwx-idle{margin:0;padding:20px;text-align:center;font:400 12.5px/1.6 var(--mono);color:var(--dim);max-width:34ch}
.pwx-prev-busy{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,7,13,.55);backdrop-filter:blur(2px);border-radius:5px}
.pwx-foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px}
.pwx-progress{display:flex;align-items:center;gap:12px;flex:1 1 240px;font:400 11.5px/1 var(--mono);color:var(--mute);font-variant-numeric:tabular-nums}
.pwx-progress .pwx-bar{flex:1;height:6px}
.pwx-guide{margin-left:auto;font:400 12.5px/1.4 var(--mono);color:var(--mute);text-decoration:none}
.pwx-guide b{color:var(--teal);font-weight:600}
.pwx-guide:hover{color:var(--txt)}
.pwx-guide:hover b{color:var(--purple-hi)}

/* export modal: source above a full-width preview; each tab's action row is a sticky footer of the
   scrolling modal body, so Download / Copy / Preview stay visible at 1024x768 */
.pwx-modal .pwx-split{grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(120px,21vh,220px) clamp(240px,42vh,480px);height:auto;min-height:0}
.pwx-modal .pwx-pane>.pwx-actions{position:sticky;bottom:-14px;z-index:3;margin:0 -22px -18px;padding:10px 22px 12px;
  background:var(--panel2);border-top:1px solid var(--line);box-shadow:0 -10px 18px -12px rgba(0,0,0,.7)}
.pwx-modal .pwx-foot{padding-bottom:4px}

/* design canvas (non-modal side mode) */
:where(.pwx-canvas-host){display:block;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:16px;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.8)}
.pwx-canvas .pwx-split{grid-template-columns:minmax(0,1fr);grid-template-rows:220px clamp(260px,46vh,520px);height:auto;min-height:0}
.pwx-canvas .pwx-cards{grid-template-columns:repeat(2,1fr)}
.pwx-canvas-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pwx-canvas-head b{font:600 16px/1.2 var(--body);color:var(--txt)}

/* fallback dialog (when PWMaps.modal is absent, e.g. standalone harness) */
.pwx-dialog{background:var(--panel2);color:var(--txt2);border:1px solid var(--line2);border-radius:10px;padding:0;width:min(960px,calc(100vw - 24px));max-height:calc(100vh - 40px);box-shadow:0 40px 100px -30px rgba(0,0,0,.85)}
.pws-dialog{width:min(720px,calc(100vw - 24px))}
.pwx-dialog::backdrop{background:rgba(5,4,10,.62);backdrop-filter:blur(6px)}
.pwx-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.pwx-dialog-head h2{margin:0;font:600 18px/1.2 var(--body);color:var(--txt)}
.pwx-dialog-body{padding:16px 20px;overflow:auto;max-height:calc(100vh - 170px)}
.pwx-dialog-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--line)}
.pwx-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:300;background:var(--panel2);border:1px solid var(--line2);border-left:3px solid var(--purple);color:var(--txt);font:400 13px/1.4 var(--mono);padding:10px 16px;border-radius:5px;transition:opacity .35s}
.pwx-toast-ok{border-left-color:var(--ok)}.pwx-toast-error{border-left-color:var(--hot)}.pwx-toast-warn{border-left-color:var(--amber)}
.pwx-toast.out{opacity:0}

/* ---------- style editor ---------- */
:where(.pws-host){display:block;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:16px;overflow:auto}
.pws{display:flex;flex-direction:column;gap:16px;color:var(--txt2);font-size:13.5px}
.pws-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pws-head b{font:600 16px/1.2 var(--body);color:var(--txt)}
.pws-sec{display:grid;gap:10px}
.pws-sec h4{margin:0;font:400 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:10px}
.pws-sec h4::after{content:'';flex:1;height:1px;background:var(--line)}
.pws-hint{margin:0;font-size:12.5px;line-height:1.5;color:var(--dim)}
.pws-chips{display:flex;flex-wrap:wrap;gap:6px}
.pws-chip{display:inline-flex;align-items:center;gap:8px;padding:7px 10px 7px 8px;border-radius:999px;border:1px solid var(--line2);background:var(--pws-chip-bg,var(--bg));color:var(--txt2);font:400 12px/1 var(--mono);cursor:pointer;transition:.18s}
.pws-chip:hover{border-color:var(--purple)}
.pws-chip[aria-checked="true"]{border-color:var(--purple-hi);box-shadow:0 0 0 2px rgba(182,170,255,.25);color:var(--txt)}
.pws-chip[data-preset="paper"]{color:#241d50}
.pws-chip[data-preset="paper"][aria-checked="true"]{color:#241d50}
.pws-dots{display:inline-flex}
.pws-dots i{width:10px;height:10px;border-radius:50%;margin-right:-3px;border:1px solid rgba(0,0,0,.25)}
.pws-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px 10px}
.pws-sw{display:flex;align-items:center;gap:8px;font:400 12px/1.2 var(--mono);color:var(--txt2);cursor:pointer;min-width:0}
.pws-sw span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pws-sw input[type=color]{-webkit-appearance:none;appearance:none;width:28px;height:22px;border:1px solid var(--line2);border-radius:4px;padding:0;background:none;cursor:pointer;flex:0 0 auto}
.pws-sw input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.pws-sw input[type=color]::-webkit-color-swatch{border:0;border-radius:2px}
.pws-sw input[type=color]::-moz-color-swatch{border:0;border-radius:2px}
.pws-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.pws-field{display:grid;gap:5px;min-width:0}
.pws-field>span{font:400 11px/1 var(--mono);letter-spacing:.06em;color:var(--mute)}
.pws-seg{display:inline-flex;border:1px solid var(--line2);border-radius:4px;overflow:hidden;width:max-content}
.pws-seg button{background:none;border:0;color:var(--mute);font:400 12px/1 var(--mono);padding:9px 12px;cursor:pointer}
.pws-seg button+button{border-left:1px solid var(--line2)}
.pws-seg button[aria-checked="true"]{background:rgba(148,135,216,.18);color:var(--purple-hi)}
.pws-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}
.pws-toggle{display:flex;align-items:center;gap:9px;cursor:pointer;font:400 12.5px/1.2 var(--mono);color:var(--txt2);position:relative}
.pws-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.pws-toggle i{width:30px;height:17px;border-radius:9px;background:rgba(148,135,216,.18);border:1px solid var(--line2);position:relative;flex:0 0 auto;transition:.18s}
.pws-toggle i::after{content:'';position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:var(--mute);transition:.18s}
.pws-toggle input:checked+i{background:rgba(79,216,192,.22);border-color:var(--teal)}
.pws-toggle input:checked+i::after{left:15px;background:var(--teal)}
.pws-toggle input:focus-visible+i{outline:2px solid var(--purple-hi);outline-offset:2px}
.pws-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px}
.pws-dgroup{border:1px solid var(--line);border-radius:5px;padding:8px 10px 10px;margin:0;display:grid;gap:6px;align-content:start;min-width:0}
.pws-dgroup legend{font:400 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--purple);padding:0 4px}
.pws-chk{display:flex;align-items:center;gap:7px;font:400 12px/1.25 var(--mono);color:var(--txt2);cursor:pointer}
.pws-chk input{accent-color:var(--purple);margin:0;width:14px;height:14px;flex:0 0 auto}
.pws-hover{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.pws-k{font:400 11px/1 var(--mono);letter-spacing:.06em;color:var(--mute)}
.pws-foot{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.pws-io{display:grid;gap:10px}
.pws-json{min-height:260px}

/* ---------- "Make it yours" guide ---------- */
.pwg-hero .nw-lead{max-width:68ch}
.pwg-cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;border:1px solid var(--line2);border-radius:8px;padding:20px 24px;
  background:linear-gradient(120deg,rgba(79,216,192,.10),rgba(148,135,216,.10) 55%,rgba(240,182,74,.06));margin:28px 0}
.pwg-cta b{font:600 18px/1.3 var(--body);color:var(--txt);display:block}
.pwg-cta span{color:var(--mute);font-size:14.5px}
.pwg-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:44px;align-items:start}
.pwg-body{min-width:0}
.pwg-body>section{scroll-margin-top:96px;padding-bottom:18px}
.pwg-body>section+section{border-top:1px solid var(--line);padding-top:34px;margin-top:20px}
.pwg-body h2{margin-top:0}
.pwg-body h3{color:var(--purple-hi);margin:1.5em 0 .5em;font-size:17px}
.pwg-body p,.pwg-body li{color:var(--txt2)}
.pwg-formats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.pwg-fmt{border:1px solid var(--line);border-radius:6px;padding:16px;background:rgba(14,12,23,.7)}
.pwg-fmt b{font:400 15px/1 var(--mono);color:var(--purple-hi);display:block;margin-bottom:8px}
.pwg-fmt p{margin:0;font-size:14px;color:var(--mute)}
.pwg-fmt a{font:400 11.5px/1 var(--mono);letter-spacing:.06em;display:inline-block;margin-top:10px}
.pwx-snip{position:relative}
.pwx-snip>.nw-code{padding-right:76px}
.pwx-copy{position:absolute;top:8px;right:8px;z-index:1;background:rgba(23,20,48,.9);border:1px solid var(--line2);color:var(--purple-hi);font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:7px 9px;border-radius:3px;cursor:pointer}
.pwx-copy:hover{background:rgba(148,135,216,.2)}
.pwx-copy.is-done{color:var(--ok);border-color:rgba(79,216,160,.5)}
.pwg-live{border:1px solid var(--line2);border-radius:8px;overflow:hidden;margin:16px 0 22px;background:rgba(12,10,24,.6)}
.pwg-live-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);font:400 11.5px/1 var(--mono);color:var(--mute);letter-spacing:.06em}
.pwg-live-bar b{color:var(--teal);font-weight:400;letter-spacing:.14em;text-transform:uppercase}
.pwg-live-bar .pwx-actions{gap:6px}
.pwg-live-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.pwg-live textarea{border:0;border-right:1px solid var(--line);border-radius:0;min-height:420px;background:rgba(8,7,13,.6)}
.pwx-live-out{position:relative;display:flex;align-items:center;justify-content:center;height:480px;overflow:hidden;padding:14px;
  background:radial-gradient(circle at 1px 1px,rgba(148,135,216,.12) 1px,transparent 1.2px) 0 0/16px 16px,#08070d}
.pwg-live .pwx-err{margin:10px 14px}
.pwg-schema{width:100%;border-collapse:collapse;font-size:13.5px;margin:10px 0 24px}
.pwg-schema th{text-align:left;font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:9px 10px;border-bottom:1px solid var(--line2)}
.pwg-schema td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--txt2)}
.pwg-schema td:first-child{font-family:var(--mono);color:var(--purple-hi);white-space:nowrap}
.pwg-schema td:nth-child(2){font:400 12px/1.5 var(--mono);color:var(--teal);white-space:nowrap}
.pwg-schema tr.grp td{background:rgba(148,135,216,.07);font:400 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--purple);padding:10px}
.pwg-table-wrap{overflow-x:auto}
.pwg-swatch{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin-right:6px;border:1px solid rgba(255,255,255,.18)}
.pwg-presets{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.pwg-presets span{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:999px;padding:6px 10px;font:400 12px/1 var(--mono)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .pwg-layout{grid-template-columns:1fr}
  .pwg-layout .nw-toc{display:none}
  .pwg-formats{grid-template-columns:1fr 1fr}
  .pwg-live-grid{grid-template-columns:1fr}
  .pwg-live textarea{border-right:0;border-bottom:1px solid var(--line);min-height:220px}
  .pwx-live-out{height:400px}
}
@media (max-width:720px){
  .pwx-cards{grid-template-columns:repeat(2,1fr)}
  .pwx-split{grid-template-columns:minmax(0,1fr);grid-template-rows:200px clamp(240px,46vh,420px);height:auto}
  .pwg-formats{grid-template-columns:1fr}
  .pws-grid2,.pws-toggles{grid-template-columns:1fr}
}

/* ---------- reduced motion: spinners stay but do not spin; no slides/shimmer ---------- */
@media (prefers-reduced-motion: reduce){
  .pwx-spin{animation:none;border-top-color:var(--purple-hi);border-right-color:var(--purple-hi)}
  .pwx-bar i{transition:none}
  .pwx-bar i::after{animation:none;display:none}
  .pwx-pane{animation:none}
  .pwx-card,.pws-chip,.pws-toggle i,.pws-toggle i::after{transition:none}
}
.reduced-motion .pwx-spin{animation:none}
.reduced-motion .pwx-bar i::after{display:none}
.reduced-motion .pwx-pane{animation:none}

/* ---- full screen for previews and the guide's live explorers (task 8) ---- */
/* the toggle: its own 32 px icon button in the preview's top-right corner; the zoom tools sit to its left */
.pwx-fsbtn{position:absolute;top:8px;right:8px;z-index:3;width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:5px;border:1px solid var(--line2);background:rgba(8,7,13,.86);color:var(--txt2);cursor:pointer;backdrop-filter:blur(3px)}
.pwx-fsbtn:hover{border-color:var(--purple);color:var(--purple-hi)}
.pwx-fsbtn:focus-visible{outline:2px solid var(--purple-hi);outline-offset:1px}
.pwx-fsbtn[aria-pressed="true"]{color:var(--teal);border-color:rgba(79,216,192,.5)}
.pwx-fsbtn svg{display:block}
.has-view .pwx-ztools{right:48px}
.pwx-prev:fullscreen,.pwx-live-out:fullscreen{width:100vw;height:100vh;border:0;border-radius:0;background:var(--bg,#08070d)}
.pwx-prev:-webkit-full-screen,.pwx-live-out:-webkit-full-screen{width:100vw;height:100vh;background:var(--bg,#08070d)}
.pwx-prev.is-fs-pinned,.pwx-live-out.is-fs-pinned{position:fixed!important;inset:0!important;z-index:3000!important;width:auto!important;height:auto!important;max-height:none!important;
  margin:0!important;border:0!important;border-radius:0!important;background:var(--bg,#08070d)}
html.pwfs-lock,html.pwfs-lock body{overflow:hidden}
/* the pinned fallback must escape its ancestors' containing blocks and stacking contexts (backdrop-filter, transforms, z-index) */
html.pwfs-lock :has(.is-fs-pinned){transform:none!important;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  perspective:none!important;contain:none!important;will-change:auto!important;z-index:3000!important;animation:none!important}   /* lift every ancestor stacking context (fixed and z-indexed ones form one); a filled transform animation also makes a containing block */