/* ==========================================================================
   Email Signature Generator — tool UI only
   The generated signature itself is deliberately raw table + inline-styled
   HTML (that is the product); only the surrounding tool chrome is themed here.
   Layout follows the Image Placeholder tool: a single-column .tool-grid form
   with the live preview below everything.
   ========================================================================== */

/* Rows are .tool-grid from tools.css — this file used to declare .es-row, which
   was the same grid written a second time and stacked at 600px where every other
   tool stacks at 768px. Each row stays its own grid so hiding a conditional field
   never reflows another row's pairing; that comes from using the class per row,
   not from a separate class. */

/* Prefixed input — a static URL base sits before the field so it is obvious the
   user types only their username (e.g. "linkedin.com/in/ ▸ erlenmasson").
   The wrapper wears the input's own chrome, from the input's own tokens: it sits
   in the same grid row as a plain field and has to read as the same control.
   It used to draw --background-primary, --border-primary and --radius-s, which
   rendered white, near-black-bordered and rounded beside a grey, square,
   #a3a3a3 field. */
.es-affix {
  display: flex;
  align-items: stretch;
  border: var(--border-s) solid var(--input-border);
  background: var(--input-background);
}

/* No fill of its own — the divider rule and --text-secondary are what mark the
   prefix static. A fill cannot work here: --background-faded and
   --input-background are the same value in light mode, so the prefix would
   disappear into the field it sits in.
   The divider keeps --border-primary while the wrapper takes --input-border.
   They are not the same job: the outer border has to match a plain field, the
   divider has to be seen against that field's own fill. Matching them makes the
   divider 1.15:1 in dark mode and the prefix reads as typed text. */
.es-affix-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-s);
  color: var(--text-secondary);
  font-size: var(--font-s);
  white-space: nowrap;
  border-right: var(--border-s) solid var(--border-primary);
}

.es-affix input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

/* One ring around the composed control rather than two: the inner field gives
   its outline up and the wrapper draws the system's, from the same token and at
   the same offset a plain input uses. The previous rule changed the wrapper's
   border-color to --text-primary on focus, which was a no-op — --border-primary
   *is* --text-primary (design-system.css section 3), so the border was already
   that colour and these fields had no focus indicator at all. */
.es-affix input:focus {
  outline: none;
  box-shadow: none;
}

.es-affix:focus-within {
  outline: 1px solid var(--input-focus);
  outline-offset: 2px;
}

/* Invalid state — non-blocking; the copy still works. A plain field is covered
   by the system's own `input.is-error` rule; only the composed field needs a
   line here, because its border lives on the wrapper rather than the input. */
.es-affix:has(input.is-error) {
  border-color: var(--status-danger);
}

.es-affix:has(input.is-error):focus-within {
  outline-color: var(--status-danger);
}

/* The rendered signature sits on a neutral surface, square corners. */
.es-preview {
  padding: var(--space-l);
  background-color: var(--background-secondary);
  border: var(--border-s) solid var(--border-primary);
  overflow-x: auto;
}

/* The design system appends an external-link glyph to a[target="_blank"]. That
   styling never reaches a real inbox, so suppress it inside the preview only —
   the copied HTML is unaffected. */
.es-preview a[target="_blank"]::after {
  content: none;
}

/* Raw HTML source view (toggled with the Preview segmented control). It ships
   with .is-hidden and JS moves that class — the [hidden] attribute cannot do
   this job, because the global `textarea { display: block }` rule outranks it,
   while .is-hidden is display:none !important and does not. */
.es-html-view {
  width: 100%;
  min-height: 360px;
  font-family: monospace;
  font-size: var(--font-s);
  white-space: pre;
}

/* .es-group-label is gone. It captioned the toggle row in the old sticky bar as
   a <label> that labelled nothing — no `for`, nothing pointing at it. The
   bar's own .bar-label carries it now, wired to the group with
   aria-labelledby, the same way .es-row gave way to .tool-grid above. */

/* The copy status region uses the shared .visually-hidden utility (design-system.css
   section 10). This file used to carry its own copy of the recipe. */