/* Visual showcase documentation only — no PathPilot source modifications */
.ds-showcase {direction:rtl}
.ds-showcase .ds-grid {align-items:stretch}
.ds-showcase .fx-stage{min-height:190px;border-radius:12px;overflow:hidden;position:relative;background:#ececf0;display:flex;align-items:center;justify-content:center;padding:16px}
.ds-showcase .fx-stage.fx-dark{background:#15161b}
.ds-showcase .fx-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ds-showcase .fx-swatch{background:#fff;border:1px solid #ececea;border-radius:12px;overflow:hidden;min-width:0}
.ds-showcase .fx-paint{height:150px;position:relative;display:grid;place-items:center}
.ds-showcase .fx-caption{padding:14px}
.ds-showcase .fx-caption strong{display:block;font-size:13px}
.ds-showcase .fx-caption span{display:block;margin-top:5px;font-size:11px;color:#777;line-height:1.6}
.ds-showcase .fx-caption small{font-size:10px;color:#aaa;direction:ltr;display:block;margin-top:8px;text-align:left}
.ds-showcase .fx-glass-back{background:radial-gradient(circle at 15% 75%,#63d9db 0,transparent 42%),radial-gradient(circle at 83% 15%,#b99af8 0,transparent 47%),#edf3ff}
.ds-showcase .fx-mini-bar.check-topline{position:relative;top:auto;margin:0!important;width:100%;height:58px;font-size:12px;max-width:520px;z-index:1;padding-inline:14px}
.ds-showcase .fx-mini-bar strong{font-size:12px}
.ds-showcase .fx-mini-bar button{border:1px solid #dedee3;padding:8px 13px;border-radius:999px;background:#fff;font-size:11px}
.ds-showcase .fx-glass-panel.check-stage{position:relative;min-height:125px;width:84%;max-width:300px;margin:0;padding:22px;overflow:visible}
.ds-showcase .fx-glass-panel strong{font-size:14px;display:block;margin-bottom:12px}
.ds-showcase .fx-glass-panel small{font-size:11px;color:#555}
.ds-showcase .fx-compare{display:flex;gap:8px;margin-top:16px;align-items:center;flex-wrap:wrap}
.ds-showcase .fx-compare button{border:1px solid #ddd;border-radius:999px;padding:8px 14px;background:#fff;font-size:11px}
.ds-showcase .fx-compare button[aria-pressed=true]{background:#141414;color:#fff}
.ds-showcase .fx-disabled-glass .check-topline,.ds-showcase .fx-disabled-glass .check-stage{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.ds-showcase .fx-grid-previews{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.ds-showcase .fx-grid-item{border:1px solid #e9e9e8;background:#f6f6f6;border-radius:11px;padding:17px;display:grid;place-items:center;gap:12px}
.ds-showcase .fx-grid-item .grid-glyph{transform:scale(2)}
.ds-showcase .fx-grid-item .grid-glyph--diamond{transform:rotate(45deg) scale(1.45)}
.ds-showcase .fx-grid-item small{font-size:11px;color:#888}
.ds-showcase .fx-marker-wrap{background:#f7f7f7;border:1px solid #ededed;border-radius:14px;padding:14px;min-width:0}
.ds-showcase .fx-marker-svg{width:100%;display:block;aspect-ratio:2.3/1;min-height:180px}
.ds-showcase .fx-marker-options{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:13px}
.ds-showcase .fx-marker-options label{font-size:11px;color:#555;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ds-showcase .fx-marker-options input{accent-color:#875ee6}
.ds-showcase .fx-marker-options input[type=range]{max-width:145px}
.ds-showcase .fx-marker-key{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.ds-showcase .fx-marker-key span{display:inline-flex;gap:7px;align-items:center;padding:7px 9px;border:1px solid #e8e8e8;background:white;border-radius:8px;font-size:10px;color:#666}
.ds-showcase .fx-legend-dot{width:10px;height:10px;display:inline-block;border:1.5px solid #694cb8;background:white;border-radius:50%}
.ds-showcase .fx-legend-square{width:10px;height:10px;display:inline-block;border:1.5px solid #222;background:white}
.ds-showcase .fx-legend-start{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:9px solid #5b3fc4}
.ds-showcase .fx-legend-heat{width:27px;height:7px;border-radius:2px;background:linear-gradient(90deg,rgb(247,214,120),rgb(226,104,150))}
.ds-showcase .fx-footer-demo{border:1px solid #e7e7e7;background:#fff;border-radius:15px;padding:12px}
.ds-showcase .fx-footer-demo .site-footer{margin:0!important;width:100%;padding:27px 29px;min-height:180px}
.ds-showcase .fx-footer-demo .site-footer .footer-brand svg{width:100%;height:auto}
.ds-showcase .fx-footer-demo .site-footer .footer-brand{width:108px;display:flex;align-items:center}
.ds-showcase .fx-footer-demo .footer-nav{gap:7px 16px}
.ds-showcase .fx-footer-demo .footer-nav a{font-size:11px}
.ds-showcase .fx-footer-demo .footer-signature{font-size:12px;color:#f2f2f2}
.ds-showcase .fx-footer-demo .footer-top{direction:ltr}
.ds-showcase .fx-footer-demo .footer-bottom{direction:ltr}
.ds-showcase .fx-footer-demo .social-links svg{width:17px;height:17px}
.ds-showcase .fx-footer-demo .social-links a{display:grid;place-items:center}
.ds-showcase .fx-logo-wrap{background:#111;padding:24px;border-radius:12px;color:#fff}
.ds-showcase .fx-logo-wrap svg{width:100%;max-width:270px;display:block;height:auto}
.ds-showcase .fx-micro{font-size:10px;color:#969696;margin-top:10px}
.ds-showcase .fx-variant{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.ds-showcase .fx-variant button{border:1px solid #ddd;background:white;border-radius:8px;padding:8px 11px;font-size:11px}
.ds-showcase .fx-variant button[aria-pressed=true]{border-color:#b99af8;background:#f3edff}
.ds-showcase .fx-check-evidence.check-evidence{margin:0;min-height:118px;position:relative;display:flex;flex-direction:column;justify-content:center;gap:10px}
.ds-showcase .fx-check-evidence h2{font-size:17px!important}
.ds-showcase .fx-pattern-dark{background-color:#0f1110;min-height:170px}
.ds-showcase .fx-pattern-dark .canvas-grid{position:absolute;inset:0;display:block}
.ds-showcase .fx-pattern-light{background:#fff;min-height:170px}
.ds-showcase .fx-pattern-light .canvas-grid{position:absolute;inset:0;display:block}
.ds-showcase .fx-showcase-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.ds-showcase .fx-showcase-controls button{font-size:11px;border-radius:999px;padding:8px 12px;border:1px solid #dedede;background:#fff;color:#222}
.ds-showcase .fx-showcase-controls button[aria-pressed=true]{background:#201c29;color:#fff}
.ds-showcase .fx-source-note{display:inline-flex;font-size:10px;color:#aaa;border:1px solid #eee;padding:6px 8px;border-radius:6px;background:#f9f9f9;margin-top:12px}
.ds-showcase .fx-demo-shell{border:1px solid #e6e6e6;border-radius:13px;padding:12px;background:#f1f2f3}
.ds-showcase .fx-demo-shell .check-topline{position:relative;top:0;margin:0}
@media(max-width:1000px){.ds-showcase .fx-palette{grid-template-columns:1fr}.ds-showcase .fx-footer-demo .footer-nav{gap:3px 10px}}@media(max-width:620px){.ds-showcase .fx-footer-demo .footer-top,.ds-showcase .fx-footer-demo .footer-bottom{flex-direction:column;align-items:start;gap:12px}.ds-showcase .fx-footer-demo .site-footer{padding:18px}.ds-showcase .fx-marker-svg{min-height:120px}.ds-showcase .fx-grid-item{padding:10px}}