/* Free tools per style look: each look brings one small, useful tool that pops up the
   first time that look is picked in a visit. Colors follow the active look's variables.
   style-features.js builds the popup. Local only: build_embed.py strips these files. */

.sty .sf-tag{display:block;margin-top:4px;font-size:.72rem;font-weight:700;color:var(--muted)}
.sty .sf-tag b{display:inline;color:var(--gold);font-size:inherit}

.look-chip{flex-wrap:wrap}
.look-chip .sf-open{background:transparent;color:var(--text);border:1px solid var(--edge-strong)}
.look-chip .sf-open:hover{border-color:var(--ai);color:var(--ai)}

.sf{position:fixed;inset:0;z-index:85;display:none;place-items:center;padding:16px;background:rgba(2,6,12,.62);backdrop-filter:blur(3px)}
.sf.on{display:grid}
.sf-box{position:relative;width:min(520px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;
  background:linear-gradient(var(--panel),var(--panel)),var(--bg);color:var(--text);border:1px solid var(--edge-strong);
  border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px 22px 18px;animation:sfIn .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes sfIn{from{transform:translateY(18px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.sf-box{animation:none}}
.sf-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--edge);background:var(--panel-2);color:var(--text);font-size:1.2rem;line-height:1}
.sf-x:hover{border-color:var(--ai)}
.sf-kick{font-size:.72rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--ai);margin-right:40px}
.sf-box h3{font-family:var(--head);font-size:1.45rem;line-height:1.15;margin:4px 40px 6px 0}
.sf-lead{color:var(--muted);font-size:.93rem;margin-bottom:14px}
.sf-body label{display:block;font-size:.8rem;font-weight:700;color:var(--muted);margin:10px 0 4px}
.sf-body input,.sf-body select,.sf-body textarea{width:100%;font:inherit;font-size:.95rem;color:var(--text);background:var(--bg);
  border:1px solid var(--edge-strong);border-radius:var(--r-sm);padding:9px 11px}
.sf-body textarea{resize:vertical;min-height:84px}
.sf-body input:focus,.sf-body select:focus,.sf-body textarea:focus{outline:2px solid var(--ai);outline-offset:1px}
.sf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sf-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.sf-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sf-btn{border:0;border-radius:24px;padding:9px 15px;font-weight:800;font-size:.88rem;background:var(--cta);color:#04130c}
.sf-btn.ghost{background:transparent;color:var(--text);border:1px solid var(--edge-strong)}
.sf-btn:hover{filter:brightness(1.08)}
body.look-light .sf-btn:not(.ghost),body[data-look="neon"] .sf-btn:not(.ghost),body[data-look="cinematic"] .sf-btn:not(.ghost){color:#fff}
body[data-look="linen"] .sf-btn:not(.ghost){color:#1f2a1e}
body[data-look="blueprint"] .sf-btn:not(.ghost),body[data-look="luxury"] .sf-btn:not(.ghost){color:#0b0b0b}
.sf-chips{display:flex;flex-wrap:wrap;gap:6px}
.sf-chips button{border:1px solid var(--edge-strong);background:transparent;color:var(--text);border-radius:20px;padding:6px 12px;font-weight:700;font-size:.85rem}
.sf-chips button.on{background:var(--ai);border-color:var(--ai);color:var(--bg)}
.sf-out{margin-top:14px;padding:14px;border-radius:var(--r-md);background:var(--panel-2);border:1px solid var(--edge)}
.sf-big{font-family:var(--display);font-size:2rem;line-height:1.1;color:var(--gold)}
.sf-lines{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:.95rem}
.sf-lines b{text-align:right}
.sf-text{white-space:pre-wrap;font-size:.95rem;line-height:1.55}
.sf-canvas{width:100%;height:auto;border-radius:var(--r-sm);border:1px solid var(--edge);background:#fff;margin-top:12px}
.sf-qr{display:block;width:min(260px,100%);height:auto;margin:12px auto 0;image-rendering:pixelated;border-radius:6px}
.sf-items{display:grid;gap:6px;margin-top:6px}
.sf-item{display:grid;grid-template-columns:minmax(0,1fr) 64px 92px 34px;gap:6px;align-items:center}
.sf-item input{padding:8px}
.sf-item .sf-del{width:34px;height:34px;border-radius:50%;border:1px solid var(--edge);background:transparent;color:var(--muted)}
.sf-heads{display:grid;grid-template-columns:minmax(0,1fr) 64px 92px 34px;gap:6px;font-size:.72rem;font-weight:800;color:var(--faint);text-transform:uppercase;letter-spacing:1px;margin-top:8px}
.sf-note{margin-top:14px;font-size:.78rem;color:var(--faint)}
.sf-note a{color:var(--ai);font-weight:700}
.sf-live{font-size:.82rem;color:var(--ai);font-weight:700;min-height:1.2em;margin-top:6px}
@media (max-width:480px){
  .sf-box{padding:18px 16px 14px}
  .sf-box h3{font-size:1.25rem}
  .sf-row3{grid-template-columns:1fr 1fr}
  .sf-item,.sf-heads{grid-template-columns:minmax(0,1fr) 52px 76px 30px}
  .sf-item .sf-del{width:30px;height:30px}
}