/* Wubi Input Lookup — RT-TXT-059
   Widget styling. The form shell + ad/section styling come from the platform
   tool layout; this file scopes the wb-* result components. TEAL text-tool
   theme (accent #0D9488). Loaded automatically by show.blade.php when present. */

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

.wb-modes {
  display: inline-flex; gap: 0; border: 1px solid var(--rt-hairline);
  border-radius: 8px; overflow: hidden; align-self: flex-start;
}
.wb-mode-btn {
  padding: 9px 18px; font-family: var(--rt-font-mono); font-size: 12px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  background: #fff; color: var(--rt-ink-muted); border: 0; cursor: pointer;
}
.wb-mode-btn + .wb-mode-btn { border-left: 1px solid var(--rt-hairline); }
.wb-mode-btn.is-active { background: #0D9488; color: #fff; }

.wb-input-row { display: flex; flex-direction: column; gap: 6px; }
.wb-input-row label {
  font-family: var(--rt-font-mono); font-size: 11px; color: var(--rt-ink-muted);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.wb-input-row textarea, .wb-input-row input {
  padding: 14px 16px; border: 1px solid var(--rt-hairline); border-radius: 8px;
  background: #fff; font-family: inherit; width: 100%;
}
.wb-input-row textarea { font-size: 22px; line-height: 1.5; min-height: 64px; resize: vertical; }
.wb-input-row input { font-size: 18px; letter-spacing: .08em; }
.wb-input-row textarea:focus, .wb-input-row input:focus {
  outline: none; border-color: #0D9488; box-shadow: 0 0 0 3px rgba(13,148,136,.14);
}

.wb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wb-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; background: #0D9488; color: #fff; border: 1px solid #0F766E;
}
.wb-btn:hover { background: #0F766E; }
.wb-btn-sample, .wb-btn-clear {
  background: #fff; color: #0F766E; border: 1px solid rgba(13,148,136,.4);
}
.wb-btn-sample:hover, .wb-btn-clear:hover { background: #CCFBF1; }

.wb-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; margin-top: 4px;
}

.wb-empty, .wb-loading {
  padding: 16px; text-align: center; color: var(--rt-ink-muted); font-style: italic;
}
.wb-fail {
  padding: 14px 16px; background: #FEF2F2; border-left: 3px solid #DC2626;
  border-radius: 0 6px 6px 0; font-size: 13px; color: #991B1B; line-height: 1.5;
}

/* ---- Mode 1: char → code cards ---- */
.wb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.wb-card {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--rt-hairline); border-radius: 10px;
}
.wb-glyph {
  font-family: var(--rt-font-sans); font-size: 40px; line-height: 1;
  flex: 0 0 auto; min-width: 44px; text-align: center; color: var(--rt-ink);
}
.wb-card-body { flex: 1; min-width: 0; }

.wb-code-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wb-code-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border: 1px solid var(--rt-hairline); border-radius: 6px;
  background: var(--rt-surface-2, #f7f6f3);
}
.wb-code-letters {
  font-family: 'SF Mono', Menlo, monospace; font-size: 16px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--rt-ink);
}
.wb-code-tag {
  font-family: var(--rt-font-mono); font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: #0F766E;
}
.wb-code-chip.is-simple { background: #CCFBF1; border-color: rgba(13,148,136,.4); }
.wb-code-chip.is-simple .wb-code-letters { color: #0F766E; }
.wb-code-chip.is-full { border-color: rgba(13,148,136,.28); }

.wb-nocode { font-size: 12.5px; color: var(--rt-ink-muted); font-style: italic; }

/* ---- Mode 2: code → chars ---- */
.wb-rev-block { margin-bottom: 16px; }
.wb-rev-lbl {
  font-family: var(--rt-font-mono); font-size: 11px; color: var(--rt-ink-muted);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
  margin-bottom: 8px;
}
.wb-rev-lbl code {
  font-family: 'SF Mono', Menlo, monospace; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: #0F766E;
  background: #CCFBF1; padding: 1px 6px; border-radius: 4px;
}
.wb-glyph-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px;
}
.wb-glyph-cell {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--rt-font-sans); font-size: 26px; line-height: 1;
  padding: 10px 4px; background: #fff; border: 1px solid var(--rt-hairline);
  border-radius: 8px; color: var(--rt-ink);
}
.wb-more { font-size: 12px; color: var(--rt-ink-muted); margin-top: 6px; font-style: italic; }

@media (max-width: 480px) {
  .wb-cards { grid-template-columns: 1fr 1fr; }
  .wb-glyph { font-size: 34px; }
}