/* CLASS SAILS — sail designer.
   Deliberately a SEPARATE stylesheet: this tool is self-contained and only loaded on
   sail-designer.html, so it can't bloat or collide with the site-wide styles. */

.sd-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:900px){.sd-wrap{grid-template-columns:1fr}}

.sd-stage{background:linear-gradient(180deg,#fff,var(--bg-alt));border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(16px,2.4vw,30px);box-shadow:var(--shadow-md);
  display:grid;place-items:center;min-height:380px}
.sd-canvas{width:100%;max-width:460px;height:auto;display:block;
  filter:drop-shadow(0 18px 40px rgba(14,26,43,.14))}
.sd-panel{cursor:pointer;transition:opacity .12s}
.sd-panel:hover{opacity:.72}
.sd-panel:focus-visible{outline:2px solid var(--red);outline-offset:2px}

.sd-panelbox{display:grid;gap:24px}
.sd-group{display:grid;gap:10px}
.sd-group h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0}

.sd-palette{display:flex;flex-wrap:wrap;gap:8px}
.sd-sw{width:36px;height:36px;border-radius:9px;border:2px solid transparent;cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1px rgba(14,26,43,.14);transition:transform .18s var(--ease),border-color .18s}
.sd-sw:hover{transform:translateY(-2px)}
.sd-sw.is-on{border-color:var(--ink);transform:translateY(-2px)}

.sd-row{display:flex;align-items:center;gap:12px}
.sd-row label{font-size:.9rem;color:var(--ink-2);font-weight:600;min-width:64px}
.sd-row input[type=range]{flex:1;accent-color:var(--red)}
.sd-row output{font-family:var(--display);font-weight:700;color:var(--ink);min-width:22px;text-align:right}
.sd-select{font-family:var(--font);font-size:1rem;font-weight:600;color:var(--ink);padding:11px 14px;
  border:1.5px solid var(--line-2);border-radius:var(--radius-sm);background:#fff;width:100%}
.sd-select:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 4px rgba(225,5,27,.1)}

.sd-pats{display:flex;flex-wrap:wrap;gap:8px}
.sd-pat{font-size:.85rem;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--line);
  border-radius:100px;padding:8px 15px;cursor:pointer;transition:border-color .2s,color .2s,transform .2s var(--ease)}
.sd-pat:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}

.sd-summary{background:var(--bg-alt);border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:var(--radius-sm);padding:14px 16px;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.sd-note{font-size:.82rem;color:var(--muted);line-height:1.55}

/* graphic drop */
.sd-file{display:block;cursor:pointer}
.sd-file input{position:absolute;width:1px;height:1px;opacity:0}
.sd-file span{display:block;border:1.5px dashed var(--line-2);border-radius:var(--radius-sm);
  padding:14px 16px;font-size:.88rem;color:var(--muted);transition:border-color .2s,color .2s;background:#fff}
.sd-file:hover span{border-color:var(--red);color:var(--red)}
.sd-stage.is-drop{outline:2px dashed var(--red);outline-offset:-8px}
.sd-gfx{cursor:grab}
.sd-gfx:active{cursor:grabbing}