/* English Name Suggester — RT-FUN-081
   Widget styling. The form shell + ad/section styling come from the platform
   tool layout; this file scopes the en-* result components (TEAL theme,
   accent #0D9488). Loaded automatically by show.blade.php when present. */

.en-form { display: flex; flex-direction: column; gap: 14px; }

/* Filter form */
.en-inputs {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; padding: 16px;
  background: var(--rt-surface-2); border: 1px solid var(--rt-hairline); border-radius: 8px;
}
@media (max-width: 720px) { .en-inputs { grid-template-columns: 1fr; } }

.en-field label {
  font-family: var(--rt-font-mono); font-size: 11px; color: var(--rt-ink-muted);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  display: block; margin-bottom: 4px;
}
.en-field select {
  padding: 10px 12px; border: 1px solid var(--rt-hairline); border-radius: 6px;
  font-size: 15px; background: #fff; width: 100%; cursor: pointer;
}
.en-field select:focus {
  outline: none; border-color: #0D9488; box-shadow: 0 0 0 3px rgba(13,148,136,.12);
}

.en-actions { display: flex; gap: 8px; }
.en-btn {
  padding: 10px 18px; font-size: 13px; border-radius: 6px; cursor: pointer;
  font-family: var(--rt-font-mono); text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.en-btn-go { background: #0D9488; color: #fff; border: 1px solid #0b7c72; }
.en-btn-go:hover { background: #0b7c72; }
.en-btn-reset { background: #fff; color: #0b7c72; border: 1px solid rgba(13,148,136,.4); }

/* Results */
.en-results { padding: 0; background: transparent; }
.en-count {
  font-family: var(--rt-font-mono); font-size: 12px; color: var(--rt-ink-muted);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin: 4px 0 10px;
}
.en-empty {
  padding: 18px; text-align: center; color: var(--rt-ink-muted); font-style: italic;
  background: #f0fdfa; border: 1px dashed rgba(13,148,136,.3); border-radius: 8px; line-height: 1.6;
}

/* Name-result cards grid */
.en-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .en-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .en-grid { grid-template-columns: 1fr; } }

.en-card {
  padding: 14px 16px; background: #fff; border: 1px solid var(--rt-hairline);
  border-radius: 10px; border-top: 3px solid #0D9488; display: flex; flex-direction: column; gap: 7px;
}
.en-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.en-card-name { font-family: var(--rt-font-sans); font-size: 21px; font-weight: 700; color: var(--rt-ink); }
.en-card-gender {
  font-family: var(--rt-font-mono); font-size: 10.5px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; text-transform: uppercase; letter-spacing: .04em;
}
.en-g-m { background: #dbeafe; color: #1e40af; }
.en-g-f { background: #fce7f3; color: #9d174d; }
.en-g-u { background: #ccfbf1; color: #0b7c72; }

.en-card-row { display: flex; gap: 8px; font-size: 13px; line-height: 1.5; }
.en-card-lbl {
  font-family: var(--rt-font-mono); font-size: 10.5px; color: var(--rt-ink-muted);
  text-transform: uppercase; letter-spacing: .03em; font-weight: 600; flex: 0 0 54px; padding-top: 1px;
}
.en-card-val { color: var(--rt-ink); flex: 1; }
.en-pron { font-family: 'SF Mono', Menlo, monospace; color: #0b7c72; font-size: 12.5px; }
.en-gloss { color: var(--rt-ink-muted); font-size: 12px; }

/* Helper note (utility — neutral, not a fortune disclaimer) */
.en-note {
  padding: 10px 14px; background: #f0fdfa; border-left: 3px solid #0D9488;
  border-radius: 0 6px 6px 0; font-size: 12.5px; color: var(--rt-ink-muted); line-height: 1.55;
}