/* =========================================================
   FRONTNESS — Verktyg: e-postsignatur
   Bygger på style.css (tokens, .field, .ctrl) och verktyg.css
   (.vt-panel, .vt-sect, .vt-card). Bara det som saknas ligger
   här, allt prefixat .sg-.

   Obs: reglerna nedan gäller verktygets gränssnitt. Signaturen
   som genereras är tabellbaserad med inline-stilar och rör
   ingenting av det här — den ska överleva Outlook.
   ========================================================= */

.sg-sect{ padding-top:2.5rem }
@media (min-width:1024px){ .sg-sect{ padding-top:3.5rem } }

.sg-studio{ display:grid; gap:1rem; align-items:start }
@media (min-width:1024px){
  .sg-studio{ grid-template-columns:minmax(0,1fr) 30rem; gap:1.25rem }
  .sg-out{ position:sticky; top:5.5rem }
}
.sg-controls{ display:flex; flex-direction:column; gap:1rem; min-width:0 }

.sg-h{ font-size:1rem; font-weight:600; letter-spacing:-.01em; margin-bottom:1.125rem;
  display:flex; align-items:baseline; gap:.5rem }
.sg-h i{ font-style:normal; font-size:.75rem; font-weight:400; color:var(--vt-faint) }
.sg-hint{ margin-top:.875rem; font-size:.8125rem; line-height:1.65; color:var(--vt-faint) }

/* ---------------------------- mallar ------------------------------ */
.sg-templates{ display:grid; grid-template-columns:repeat(3,1fr); gap:.625rem }
.sg-tpl{ display:grid; gap:.5rem; padding:.5rem; cursor:pointer;
  border:1px solid var(--vt-hair); border-radius:var(--radius-control);
  background:var(--background); font:inherit; font-size:.8125rem; font-weight:500;
  color:var(--vt-muted); transition:color .2s, border-color .2s, box-shadow .2s }
.sg-tpl:hover{ color:var(--foreground); border-color:var(--subtle) }
.sg-tpl.is-on{ color:var(--foreground); border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink) }

/* Miniatyrerna är ritade i CSS: staplar och en cirkel som antyder layouten.
   Ingen bild att ladda, och de följer med när färgerna ändras. */
.sg-tpl__thumb{ height:3rem; border-radius:.5rem; background-color:#fff;
  border:1px solid var(--vt-hair); background-repeat:no-repeat }
.sg-tpl__thumb--klassisk{
  background-image:
    radial-gradient(circle 8px at 16px 24px, rgba(17,17,17,.22) 98%, transparent 100%),
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(rgba(17,17,17,.22), rgba(17,17,17,.22)),
    linear-gradient(var(--accent), var(--accent));
  background-size:auto, 44px 5px, 34px 3px, 26px 3px;
  background-position:0 0, 32px 15px, 32px 27px, 32px 35px }
.sg-tpl__thumb--modern{
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(rgba(17,17,17,.22), rgba(17,17,17,.22)),
    linear-gradient(rgba(17,17,17,.22), rgba(17,17,17,.22));
  background-size:4px 30px, 46px 5px, 40px 3px, 44px 3px;
  background-position:12px 9px, 24px 12px, 24px 24px, 24px 31px }
.sg-tpl__thumb--kompakt{
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    linear-gradient(rgba(17,17,17,.22), rgba(17,17,17,.22)),
    linear-gradient(var(--accent), var(--accent));
  background-size:62px 5px, 70px 3px, 40px 3px;
  background-position:14px 16px, 14px 27px, 14px 34px }

/* ------------------------------ fält ------------------------------ */
.sg-fields{ display:grid; gap:.875rem }
.sg-row2{ display:grid; gap:.875rem }
@media (min-width:520px){ .sg-row2{ grid-template-columns:1fr 1fr } }
.field > span i{ font-style:normal; text-transform:none; letter-spacing:0; font-weight:400; color:var(--vt-faint) }
/* Egen pil: webbläsarens egen bryter mot fältens ram och radie. */
.sg-controls select.ctrl{ appearance:none; cursor:pointer; padding-right:2.5rem;
  background-image:linear-gradient(45deg,transparent 50%,rgba(17,17,17,.45) 50%),
                   linear-gradient(135deg,rgba(17,17,17,.45) 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) center, calc(100% - .85rem) center;
  background-size:.3rem .3rem, .3rem .3rem; background-repeat:no-repeat }

/* ---------------------------- färger ------------------------------ */
.sg-color{ display:flex; gap:.5rem; align-items:center }
.sg-color__sw{ position:relative; flex:none; width:2.875rem; height:2.875rem; cursor:pointer;
  border:1px solid var(--vt-hair); border-radius:var(--radius-control); background:var(--sw);
  overflow:hidden; transition:border-color .2s }
.sg-color__sw:hover{ border-color:var(--subtle) }
.sg-color__sw input{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0 }
.sg-color__hex{ text-transform:uppercase; font-variant-numeric:tabular-nums; letter-spacing:.04em }

.sg-presets{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem }
.sg-preset{ display:inline-flex; align-items:center; gap:.45rem; font-size:.8125rem; color:var(--vt-muted);
  border:1px solid var(--vt-hair); border-radius:var(--radius-pill); padding:.4rem .75rem;
  transition:color .2s, border-color .2s }
.sg-preset:hover{ color:var(--foreground); border-color:var(--subtle) }
.sg-preset i{ flex:none; width:.875rem; height:.875rem; border-radius:50%; background:var(--sw) }

/* --------------------------- bilduppladdning ----------------------- */
.sg-drop{ position:relative; display:grid; place-items:center; gap:.35rem; text-align:center; cursor:pointer;
  padding:1.5rem 1.25rem; border:1px dashed var(--vt-hair); border-radius:var(--radius-card-sm);
  background:var(--background); transition:border-color .2s, background .2s }
.sg-drop:hover,.sg-drop.is-over{ border-color:var(--accent); background:rgba(177,95,44,.04) }
.sg-drop input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none }
.sg-drop__ico{ color:var(--subtle); line-height:0 }
.sg-drop__ico svg{ width:2rem; height:2rem }
.sg-drop__img{ width:3.5rem; height:3.5rem; object-fit:contain; border-radius:.5rem }
.sg-drop__t{ font-size:.9375rem; font-weight:500 }
.sg-drop__s{ font-size:.8125rem; color:var(--vt-faint) }
.sg-drop.has-img .sg-drop__ico{ display:none }

.sg-textbtn{ font-size:.8125rem; font-weight:500; color:var(--vt-muted); background:var(--background);
  border:1px solid var(--vt-hair); border-radius:var(--radius-pill); padding:.5rem 1rem;
  transition:color .2s, border-color .2s }
.sg-textbtn:hover:not(:disabled){ color:var(--accent); border-color:rgba(177,95,44,.4) }
.sg-textbtn:disabled{ opacity:.45; cursor:not-allowed }
.sg-after{ margin-top:1rem; display:none; justify-items:start }
.sg-after.is-on{ display:grid }

/* --------------------------- förhandsvisning ----------------------- */
.sg-outpanel{ display:grid; gap:1.25rem; padding:1.25rem }

.sg-outhead{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap }
.sg-outhead b{ font-size:.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--vt-faint) }

/* Segmenterad kontroll för bakgrunden bakom signaturen. Mörkt läge är inte
   dekoration: det är där felen syns, som svart text på svart botten. */
.sg-seg{ display:flex; gap:.25rem; padding:.25rem;
  background:var(--vt-inset); border:1px solid var(--vt-hair); border-radius:var(--radius-pill) }
.sg-seg__b{ padding:.35rem .75rem; border-radius:var(--radius-pill);
  font-size:.75rem; font-weight:500; color:var(--vt-muted); white-space:nowrap;
  transition:color .2s, background .2s }
.sg-seg__b:hover{ color:var(--foreground) }
.sg-seg__b.is-on{ background:var(--ink); color:#fff }

.sg-stage{ min-height:14rem; padding:1.75rem; overflow-x:auto;
  background:#f4f3f1; border:1px solid var(--vt-hair); border-radius:var(--radius-card-sm) }
.sg-stage.is-dark{ background:#1b1b1b; border-color:#2a2a2a }
/* Signaturen ärver ingenting från sajten: den bär sina egna inline-stilar,
   precis som den kommer att göra i mottagarens inkorg. */
.sg-preview{ font-size:14px; line-height:1.5; display:inline-block }

.sg-actions{ display:grid; gap:.5rem }
.sg-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; padding:.85rem 1.25rem; border-radius:var(--radius-pill);
  background:var(--ink); color:#fff; font-size:.875rem; font-weight:600;
  transition:opacity .2s }
.sg-btn:hover{ opacity:.88 }
.sg-btn svg{ width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round }
.sg-copy2{ width:100%; text-align:center }
.sg-msg{ min-height:1.25rem; font-size:.8125rem; color:#0b6b0b; text-align:center }
.sg-msg.is-err{ color:#a52a2a }

/* Rå HTML-kod, utfällbar. De flesta behöver den aldrig. */
.sg-code{ font-size:.8125rem; color:var(--vt-faint) }
.sg-code summary{ cursor:pointer; color:var(--accent) }
.sg-code textarea{ width:100%; margin-top:.6rem; min-height:9rem; resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem; line-height:1.5;
  color:var(--vt-muted); background:var(--vt-inset); border:1px solid var(--vt-hair);
  border-radius:var(--radius-control); padding:.75rem; outline:none }

.sg-foot{ margin-top:1rem; padding:0 .25rem; font-size:.8125rem; line-height:1.65; color:var(--vt-faint) }