/* Chinese Character Encoding Lookup — RT-DEV-095
   Widget styling. The form shell + ad/section styling come from the platform
   tool layout; this file scopes the ce-* result components. SLATE / developer
   theme (accent #334155). Loaded automatically by show.blade.php when present. */

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

.ce-helper {
  padding: 10px 14px; background: var(--rt-surface-2); border-left: 3px solid #334155;
  border-radius: 0 6px 6px 0; font-size: 12.5px; color: var(--rt-ink-muted); line-height: 1.5;
}

.ce-input-wrap { display: flex; flex-direction: column; gap: 6px; }
.ce-input-wrap label {
  font-family: var(--rt-font-mono); font-size: 11px; color: var(--rt-ink-muted);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
#ce-input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--rt-hairline); border-radius: 8px;
  font-size: 17px; line-height: 1.5; background: #fff; min-height: 64px; resize: vertical;
  font-family: var(--rt-font-sans);
}
#ce-input:focus {
  outline: none; border-color: #334155; box-shadow: 0 0 0 3px rgba(51,65,85,.12);
}

.ce-actions { display: flex; gap: 8px; }
.ce-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;
}
.ce-btn-go { background: #334155; color: #fff; border: 1px solid #1e293b; }
.ce-btn-go:hover { background: #1e293b; }
.ce-btn-clear { background: #fff; color: #334155; border: 1px solid rgba(51,65,85,.4); }
.ce-btn-clear:hover { background: var(--rt-surface-2); }

.ce-results { padding: 0; background: transparent; }
.ce-empty { padding: 18px; text-align: center; color: var(--rt-ink-muted); font-style: italic; }

.ce-warn {
  padding: 10px 14px; margin-bottom: 12px; background: #fef9c3; border: 1px solid #fde047;
  border-radius: 6px; font-size: 12.5px; color: #854d0e; line-height: 1.5;
}

/* Per-character cards grid */
.ce-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px;
}
@media (max-width: 480px) { .ce-grid { grid-template-columns: 1fr; } }

.ce-card {
  border: 1px solid var(--rt-hairline); border-radius: 10px; background: #fff; overflow: hidden;
}
.ce-card-head {
  display: flex; align-items: baseline; gap: 12px; padding: 12px 16px;
  background: var(--rt-surface-2); border-bottom: 1px solid var(--rt-hairline);
}
.ce-glyph {
  font-family: var(--rt-font-sans); font-size: 34px; line-height: 1; color: var(--rt-ink);
}
.ce-glyph-cp {
  font-family: 'SF Mono', Menlo, monospace; font-size: 12.5px; color: #334155; font-weight: 600;
  letter-spacing: .02em;
}

.ce-enc-body { padding: 6px 0; }
.ce-enc-row {
  display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px;
  padding: 7px 16px; border-top: 1px solid rgba(0,0,0,.04);
}
.ce-enc-row:first-child { border-top: none; }
.ce-enc-key {
  font-family: var(--rt-font-mono); font-size: 10.5px; color: var(--rt-ink-muted);
  text-transform: uppercase; letter-spacing: .03em; font-weight: 600;
}
.ce-enc-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ce-val {
  font-family: 'SF Mono', Menlo, monospace; font-size: 13.5px; color: var(--rt-ink);
  word-break: break-all; font-variant-numeric: tabular-nums;
}
.ce-val-dash { color: var(--rt-ink-muted); font-style: italic; }

.ce-copy {
  border: 1px solid var(--rt-hairline); background: #fff; color: #334155;
  font-family: var(--rt-font-mono); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .04em; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  cursor: pointer; line-height: 1.4; flex-shrink: 0;
}
.ce-copy:hover { background: var(--rt-surface-2); border-color: #334155; }
.ce-copy.ce-copied { background: #dcfce7; border-color: #16a34a; color: #15803d; }

@media (max-width: 360px) {
  .ce-enc-row { grid-template-columns: 1fr; gap: 2px; }
}