/* Chinese Variant Character Lookup — RT-TXT-056
   Widget styling. Form shell + ad/section styling come from the platform tool
   layout; this file scopes the vc-* result components. TEAL text-tool theme,
   accent #0D9488. Loaded automatically by show.blade.php when present. */

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

.vc-help {
  padding: 10px 14px; background: #f0fdfa; border-left: 3px solid #14b8a6;
  border-radius: 0 6px 6px 0; font-size: 12.5px; color: var(--rt-ink-muted); line-height: 1.5;
}

.vc-inputs {
  display: grid; grid-template-columns: 1fr; gap: 8px; padding: 16px;
  background: var(--rt-surface-2); border: 1px solid var(--rt-hairline); border-radius: 8px;
}
.vc-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: 6px;
}
.vc-field input {
  padding: 12px 14px; border: 1px solid var(--rt-hairline); border-radius: 6px;
  font-size: 20px; background: #fff; width: 100%; line-height: 1.4;
}
.vc-field input:focus {
  outline: none; border-color: #14b8a6; box-shadow: 0 0 0 3px rgba(20,184,166,.14);
}

.vc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.vc-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;
}
.vc-btn-go { background: #0d9488; color: #fff; border: 1px solid #0f766e; }
.vc-btn-go:hover { background: #0f766e; }
.vc-btn-ghost { background: #fff; color: #0f766e; border: 1px solid rgba(13,148,136,.4); }
.vc-btn-ghost:hover { background: #f0fdfa; }

.vc-results { padding: 0; background: transparent; }
.vc-empty { padding: 18px; text-align: center; color: var(--rt-ink-muted); font-style: italic; }
.vc-result-hint {
  font-family: var(--rt-font-mono); font-size: 11px; color: var(--rt-ink-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px;
}

/* One card per input character */
.vc-cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
.vc-card {
  display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: start;
  padding: 16px; background: #fff; border: 1px solid var(--rt-hairline);
  border-radius: 10px; border-left: 4px solid #0d9488;
}
@media (max-width: 560px) {
  .vc-card { grid-template-columns: 1fr; gap: 10px; }
}
.vc-glyph {
  font-family: var(--rt-font-sans); font-size: 64px; line-height: 1;
  text-align: center; padding: 8px 0; color: var(--rt-ink);
  background: #f0fdfa; border: 1px solid rgba(13,148,136,.18); border-radius: 8px;
}
.vc-body { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.vc-loading { color: var(--rt-ink-muted); font-style: italic; font-size: 13px; }

/* A category group of variant chips */
.vc-cat { display: flex; flex-direction: column; gap: 6px; }
.vc-cat-lbl {
  font-family: var(--rt-font-mono); font-size: 11px; color: var(--rt-ink-muted);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
}
.vc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-chip {
  display: inline-block; min-width: 44px; padding: 8px 12px;
  font-family: var(--rt-font-sans); font-size: 26px; line-height: 1; cursor: pointer;
  background: #fff; color: var(--rt-ink);
  border: 1.5px solid rgba(13,148,136,.35); border-radius: 8px;
  transition: background 120ms ease, border-color 120ms ease;
}
.vc-chip:hover { background: #ccfbf1; border-color: #0d9488; }
.vc-chip:focus { outline: none; box-shadow: 0 0 0 3px rgba(20,184,166,.18); }

/* Category accent tints on the label bullet */
.vc-cat-sem   .vc-cat-lbl::before,
.vc-cat-simp  .vc-cat-lbl::before,
.vc-cat-trad  .vc-cat-lbl::before,
.vc-cat-z     .vc-cat-lbl::before,
.vc-cat-spec  .vc-cat-lbl::before,
.vc-cat-spoof .vc-cat-lbl::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 999px;
  margin-right: 6px; vertical-align: middle;
}
.vc-cat-sem   .vc-cat-lbl::before { background: #0d9488; }
.vc-cat-simp  .vc-cat-lbl::before { background: #2563eb; }
.vc-cat-trad  .vc-cat-lbl::before { background: #9333ea; }
.vc-cat-z     .vc-cat-lbl::before { background: #d97706; }
.vc-cat-spec  .vc-cat-lbl::before { background: #0891b2; }
.vc-cat-spoof .vc-cat-lbl::before { background: #b91c1c; }

.vc-novariants, .vc-nodata {
  padding: 10px 14px; background: var(--rt-surface-2); border-radius: 6px;
  font-size: 13px; color: var(--rt-ink-muted); font-style: italic;
}

.vc-note {
  padding: 10px 14px; background: #f0fdfa; border-radius: 6px;
  font-size: 12.5px; color: var(--rt-ink-muted); line-height: 1.55;
}