/* ============================================================================
   BPSO Blog — regex-decifrando-padroes/app.css
   Self-contained styles for the regex playground embedded in the regex post.
   Scoped under .rgx so it never leaks into the article. Uses the blog's
   BPSO Lab 2026 design tokens (with local fallbacks if loaded standalone).
   ========================================================================== */

.rgx {
  /* local fallbacks mirror blog.css :root so the widget is robust on its own */
  --r-brand-blue: var(--brand-blue, #2563eb);
  --r-brand-light: var(--brand-light, #60a5fa);
  --r-brand-glow: var(--brand-glow, rgba(37, 99, 235, .35));
  --r-bg: var(--bg-dark, #0f172a);
  --r-surface: var(--bg-card, #1e293b);
  --r-surface-2: #243349;
  --r-text: var(--text-main, #f8fafc);
  --r-muted: var(--text-muted, #94a3b8);
  --r-border: var(--border, rgba(255, 255, 255, .08));
  --r-tools: var(--cat-tools, #8b5cf6);

  /* match highlight: brand-tools violet, distinct on the dark editor */
  --r-mark-bg: rgba(139, 92, 246, .34);
  --r-mark-border: rgba(139, 92, 246, .85);
  --r-mark-text: #f5f3ff;

  --r-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', 'Consolas', monospace;

  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  color: var(--r-text);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
  min-width: 0;
}

/* Light theme: keep the editor dark (matches pop) but make chrome readable */
[data-theme="light"] .rgx {
  --r-surface: #ffffff;
  --r-surface-2: #eef2f7;
  --r-text: #0f172a;
  --r-muted: #475569;
  --r-border: rgba(15, 23, 42, .12);
  /* editor stays dark for contrast against the marks */
  --r-bg: #0f172a;
  --r-mark-bg: rgba(139, 92, 246, .42);
  --r-mark-text: #f5f3ff;
}

.rgx * { box-sizing: border-box; }

/* ---------------------------------------------------------- Labels */
.rgx__label {
  display: block;
  font-family: var(--font-head, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--r-muted);
  margin: 0 0 .45rem;
}

.rgx__sub-label {
  font-family: var(--font-head, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--r-muted);
}

/* ---------------------------------------------------------- Controls row */
.rgx__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
}

.rgx__field { min-width: 0; }

/* /pattern/flags literal-style box */
.rgx__delim {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: var(--r-bg);
  border: 1px solid var(--r-border);
  border-radius: 12px;
  padding: 0 .7rem;
  transition: border-color .15s, box-shadow .15s;
}
.rgx__delim:focus-within {
  border-color: var(--r-brand-blue);
  box-shadow: 0 0 0 3px var(--r-brand-glow);
}
.rgx__slash {
  font-family: var(--r-mono);
  font-size: 1.1rem;
  color: var(--r-tools);
  font-weight: 700;
  user-select: none;
}

.rgx__input {
  appearance: none;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--r-text);
  font-family: var(--r-mono);
  font-size: 1rem;
  line-height: 1.5;
}
.rgx__input:focus { outline: none; }
.rgx__input::placeholder { color: color-mix(in srgb, var(--r-muted) 75%, transparent); }

.rgx__pattern {
  padding: .7rem 0;
  letter-spacing: .01em;
}

/* Flags as toggle buttons */
.rgx__flags {
  display: flex;
  gap: .4rem;
}
.rgx__flag {
  appearance: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  min-width: 48px;
  min-height: 48px;
  padding: .4rem .55rem;
  background: var(--r-surface);
  border: 1px solid var(--r-border);
  border-radius: 12px;
  color: var(--r-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.rgx__flag:hover { border-color: color-mix(in srgb, var(--r-brand-blue) 55%, var(--r-border)); color: var(--r-text); }
.rgx__flag[aria-pressed="true"] {
  background: color-mix(in srgb, var(--r-brand-blue) 18%, var(--r-surface));
  border-color: var(--r-brand-blue);
  color: var(--r-text);
}
.rgx__flag-key {
  font-family: var(--r-mono);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
}
.rgx__flag[aria-pressed="true"] .rgx__flag-key { color: var(--r-brand-light); }
[data-theme="light"] .rgx__flag[aria-pressed="true"] .rgx__flag-key { color: var(--r-brand-blue); }
.rgx__flag-meaning {
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------------------------------------------------------- Presets */
.rgx__presets { min-width: 0; }
.rgx__preset-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.rgx__preset {
  appearance: none;
  min-height: 38px;
  min-width: 0;
  padding: .4rem .85rem;
  background: var(--r-surface);
  border: 1px solid var(--r-border);
  border-radius: 999px;
  color: var(--r-muted);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s, transform .1s;
}
.rgx__preset:hover { color: var(--r-text); border-color: var(--r-tools); }
.rgx__preset:active { transform: translateY(1px); }
.rgx__preset.is-active {
  background: color-mix(in srgb, var(--r-tools) 20%, var(--r-surface));
  border-color: var(--r-tools);
  color: var(--r-text);
}

/* ---------------------------------------------------------- Test editor */
.rgx__test-wrap { min-width: 0; }
.rgx__test-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.rgx__test-head .rgx__label { margin-bottom: .45rem; }

.rgx__clear {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 34px;
  padding: .3rem .7rem;
  background: transparent;
  border: 1px solid var(--r-border);
  border-radius: 999px;
  color: var(--r-muted);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: .78rem;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.rgx__clear:hover { color: var(--r-text); border-color: var(--r-brand-blue); }
.rgx__clear i { font-size: .95rem; }

/* The overlay technique: a highlight layer behind a transparent textarea.
   Both share identical box metrics so glyphs land exactly on top. */
.rgx__editor {
  position: relative;
  background: var(--r-bg);
  border: 1px solid var(--r-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.rgx__editor:focus-within {
  border-color: var(--r-brand-blue);
  box-shadow: 0 0 0 3px var(--r-brand-glow);
}

/* Shared metrics for both layers */
.rgx__highlight,
.rgx__test {
  margin: 0;
  padding: .9rem 1rem;
  font-family: var(--r-mono);
  font-size: .95rem;
  line-height: 1.6;
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  tab-size: 2;
}

.rgx__highlight {
  position: absolute;
  inset: 0;
  color: var(--r-text);
  overflow: auto;
  pointer-events: none;
  z-index: 1;
}

.rgx__test {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  min-height: 9.5rem;
  max-height: 40vh;
  resize: vertical;
  background: transparent;
  border: 0;
  color: transparent;            /* text shows through from the highlight layer */
  caret-color: var(--r-brand-light);
  overflow: auto;
}
[data-theme="light"] .rgx__test { caret-color: var(--r-brand-light); }
.rgx__test:focus { outline: none; }
.rgx__test::placeholder { color: color-mix(in srgb, var(--r-muted) 75%, transparent); }

/* Match highlight */
.rgx__mark {
  background: var(--r-mark-bg);
  color: var(--r-mark-text);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--r-mark-border);
  /* keep the glyph box identical to the textarea (no padding that shifts text) */
  padding: 0;
}
.rgx__mark--empty {
  box-shadow: inset 0 0 0 1px var(--r-mark-border);
  border-radius: 2px;
  margin: 0 -1px;
}

/* ---------------------------------------------------------- Status */
.rgx__status {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--r-muted);
  min-height: 1.4em;
}
.rgx__status--count { color: var(--r-text); font-weight: 500; }
.rgx__count {
  font-family: var(--font-head, 'Poppins', sans-serif);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--r-tools);
}
.rgx__status--zero { color: var(--r-muted); }
.rgx__status--error { color: #fca5a5; }
[data-theme="light"] .rgx__status--error { color: #b91c1c; }
.rgx__err-code {
  font-family: var(--r-mono);
  font-size: .85em;
  background: color-mix(in srgb, #ef4444 16%, transparent);
  border: 1px solid color-mix(in srgb, #ef4444 35%, transparent);
  border-radius: 6px;
  padding: .1em .4em;
}

/* ---------------------------------------------------------- Groups */
.rgx__groups {
  background: var(--r-surface);
  border: 1px solid var(--r-border);
  border-radius: 12px;
  padding: .9rem 1rem;
}
.rgx__groups[hidden] { display: none; }
.rgx__groups-body { margin-top: .6rem; }
.rgx__group-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.rgx__group-item {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
  min-width: 0;
}
.rgx__group-idx {
  font-family: var(--r-mono);
  font-weight: 700;
  font-size: .82rem;
  color: var(--r-tools);
  background: color-mix(in srgb, var(--r-tools) 16%, transparent);
  border-radius: 6px;
  padding: .1em .45em;
  flex: 0 0 auto;
}
.rgx__group-val {
  font-family: var(--r-mono);
  font-size: .88rem;
  color: var(--r-text);
  word-break: break-word;
  min-width: 0;
}
.rgx__group-empty { color: var(--r-muted); font-size: .85rem; }
.rgx__groups-none { margin: 0; color: var(--r-muted); font-size: .88rem; }

/* ---------------------------------------------------------- Cheat sheet */
.rgx__cheat {
  background: var(--r-surface);
  border: 1px solid var(--r-border);
  border-radius: 12px;
  padding: 0 1rem;
}
.rgx__cheat-summary {
  list-style: none;
  cursor: pointer;
  padding: .85rem 0;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.rgx__cheat-summary::-webkit-details-marker { display: none; }
.rgx__cheat-summary::after {
  content: "";
  width: .55rem;
  height: .55rem;
  margin-left: auto;
  border-right: 2px solid var(--r-muted);
  border-bottom: 2px solid var(--r-muted);
  transform: rotate(45deg);
  transition: transform .2s;
}
.rgx__cheat[open] .rgx__cheat-summary::after { transform: rotate(-135deg); }

.rgx__cheat-grid {
  margin: 0;
  padding: 0 0 1rem;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .4rem .9rem;
  align-items: baseline;
}
.rgx__cheat-token {
  font-family: var(--r-mono);
  font-weight: 700;
  font-size: .85rem;
  color: var(--r-tools);
  white-space: nowrap;
}
.rgx__cheat-mean {
  margin: 0;
  font-size: .85rem;
  color: var(--r-muted);
}

/* ---------------------------------------------------------- Responsive */
@media (max-width: 640px) {
  .rgx__controls {
    grid-template-columns: 1fr;
    gap: .9rem;
  }
  .rgx__flags { flex-wrap: wrap; }
  .rgx__flag { flex: 1 1 80px; }
  /* On small screens the editor + its match count must be visible together:
     cap the editor by viewport so the status sits in view while typing. */
  .rgx__test { max-height: 38vh; }
}

@media (max-width: 380px) {
  .rgx__preset { flex: 1 1 100%; text-align: center; }
  .rgx__cheat-grid { grid-template-columns: max-content 1fr; gap: .35rem .6rem; }
}

/* Respect reduced motion: drop transitions, keep full functionality. */
@media (prefers-reduced-motion: reduce) {
  .rgx__flag,
  .rgx__preset,
  .rgx__clear,
  .rgx__delim,
  .rgx__editor,
  .rgx__cheat-summary::after { transition: none; }
}