/**
 * Email Signature Generator — tool styles
 *
 * The frikwork UI only. Nothing here reaches the signature: it renders inside
 * an iframe with its own stylesheet (see FRAME_CSS in script.js), because an
 * email client will never load this file and a preview styled by it would be
 * lying about what the recipient sees.
 */

.esig-layout {
  display: grid;
  grid-template-columns: minmax(320px, 400px) 1fr;
  gap: var(--fw-space-lg);
  align-items: start;
}

.esig-notices {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-sm);
  margin-bottom: var(--fw-space-lg);
}

.esig-side,
.esig-main {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-lg);
}

/* The mobile field only exists when the phone select says so. frikwork's
   .fw-field sets display:flex, which out-specifies the UA's [hidden] rule, so
   the wrapper carries the toggle instead of the field itself. */
.esig-field[hidden] { display: none; }

#esigMessage { resize: vertical; min-height: 80px; }

/* --- Preview stage --------------------------------------------------------
 *
 * Frame + radius live on the stage, never on the frame's document, so the
 * signature keeps rendering exactly as an email client would render it.
 */

.esig-stage {
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
  background: var(--fw-bg-2);
  overflow: hidden;
}

.esig-frame {
  display: block;
  width: 100%;
  min-height: 240px;
  border: 0;
}

.esig-hint { margin-top: var(--fw-space-sm); }

/* Same specificity problem as .fw-field: .fw-btn sets display:inline-flex. */
.esig-copybtn[hidden] { display: none; }

/* Off-screen scratch node for the execCommand clipboard fallback. It has to be
   laid out for a selection to exist over it, so it is moved out of view rather
   than hidden. */
.esig-clipboard {
  position: fixed;
  top: 0;
  left: -200vw;
  width: 1000px;
  opacity: 0;
  pointer-events: none;
  user-select: text;
}

/* --- How to use ------------------------------------------------------------ */

.esig-howto__pane { padding-top: var(--fw-space-md); }
.esig-howto__pane ol { display: grid; gap: var(--fw-space-xs); }
.esig-howto__pane .fw-alert { margin-top: var(--fw-space-md); }

@media (max-width: 1100px) {
  .esig-layout { grid-template-columns: 1fr; }
}