/*
  regex-tester/regex-tester.css
  ================================
  Base komponen (field, textarea, FAQ, checkbox) mengikuti pola tool
  lain (word-counter untuk textarea, slug-generator untuk checkbox).
  Tambahan khusus: baris pola /regex/flags dan kotak highlight hasil.
*/

.mea-tool-page {
  max-width: 720px;
  padding-top: 40px;
  padding-bottom: 64px;
}

.mea-field { margin-bottom: 18px; }

.mea-pattern-row {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--mea-surface);
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-sm);
  padding: 4px 10px;
}
.mea-pattern-row:focus-within { border-color: var(--mea-accent); }
.mea-pattern-slash {
  font-family: var(--font-mono);
  color: var(--mea-text-muted);
  font-size: 15px;
  flex-shrink: 0;
}
.mea-pattern-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  padding: 8px 2px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--mea-text-primary);
}
.mea-flags-input {
  width: 52px;
  flex-shrink: 0;
  background: none;
  border: none;
  outline: none;
  padding: 8px 2px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--mea-accent-text);
}

.mea-flags-group { display: flex; flex-direction: column; gap: 10px; }

.mea-checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 13.5px !important;
  color: var(--mea-text-secondary) !important;
  margin-bottom: 0 !important;
}
.mea-checkbox-label input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--mea-accent);
  cursor: pointer;
  flex-shrink: 0;
}

.mea-textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.6;
  color: var(--mea-text-primary);
  background: var(--mea-surface);
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-md);
  padding: 16px;
  resize: vertical;
  font-family: inherit;
}
.mea-textarea:focus { outline: none; border-color: var(--mea-accent); }

.mea-match-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--mea-accent-text);
}

.mea-output-box {
  min-height: 120px;
  background: var(--mea-surface);
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-md);
  padding: 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--mea-text-primary);
}
.mea-highlight-box {
  font-family: var(--font-mono);
  white-space: pre-wrap;
  word-break: break-word;
}
.mea-highlight-box mark {
  background: var(--mea-accent-muted);
  color: var(--mea-accent-text);
  border-radius: 3px;
  padding: 0 2px;
}
.mea-output-box.is-empty { color: var(--mea-text-muted); font-style: italic; }
.mea-output-box.is-error { color: var(--mea-danger-text); font-style: italic; }

.mea-status { margin-top: 12px; font-size: 13px; min-height: 18px; }

.mea-groups-list { display: flex; flex-direction: column; gap: 6px; }
.mea-group-item {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--mea-surface);
  border: 1px solid var(--mea-border);
  border-radius: var(--mea-radius-sm);
  padding: 8px 12px;
  color: var(--mea-text-secondary);
}
.mea-group-item b { color: var(--mea-accent-text); font-weight: 600; }

/* ---------- FAQ (SEO) ---------- */

@media (max-width: 480px) {
  .mea-pattern-row { flex-wrap: wrap; }
}