/* Free Regex Tester — brand layer (Bartel Media styleguide) */
:root{
  --orange:#FF8731; --green:#186B76; --red:#D91600; --brown:#512314;
  --yellow:#FFAA01; --cream:#FAF5EC; --ink:#1a0d07;
}

html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:var(--orange); color:var(--cream); }

/* ── Preset buttons ─────────────────────────────────────────────── */
.preset-btn{
  cursor:pointer; font-family:"Space Mono",monospace; font-size:11px;
  border:2px solid var(--ink); border-radius:999px; padding:6px 13px;
  background:#fff; color:var(--ink); box-shadow:0 4px 0 var(--ink);
  transition:transform .12s, box-shadow .12s, background .15s, color .15s;
  white-space:nowrap;
}
.preset-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--ink); background:var(--yellow); }
.preset-btn:active{ transform:translateY(3px); box-shadow:0 0 0 var(--ink); }
.preset-btn.active{ background:var(--orange); color:var(--cream); }

/* ── Regex input ────────────────────────────────────────────────── */
.regex-wrap{
  display:flex; align-items:center;
  border:2px solid rgba(81,35,20,.3); border-radius:16px;
  background:#fff; overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
}
.regex-wrap:focus-within{
  border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,135,49,.22);
}
.regex-delimiter{
  padding:0 10px; font-family:"Space Mono",monospace; font-size:20px;
  color:rgba(81,35,20,.35); user-select:none; line-height:1;
}
.regex-input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font-family:"Space Mono",monospace; font-size:15px; padding:14px 4px;
  color:var(--ink);
}
.regex-flags-input{
  width:60px; border:0; outline:0; background:transparent;
  font-family:"Space Mono",monospace; font-size:15px; padding:14px 8px 14px 4px;
  color:var(--orange);
}
.regex-error{
  margin-top:6px; font-family:"Space Mono",monospace; font-size:11px;
  color:var(--red); letter-spacing:.02em;
}

/* ── Subject textarea ───────────────────────────────────────────── */
.subject-wrap{ position:relative; }
.subject-textarea, .subject-highlight{
  font-family:"DM Sans",system-ui,sans-serif; font-size:15px;
  line-height:1.65; padding:16px 18px; border-radius:16px;
  min-height:160px; width:100%; box-sizing:border-box;
}
.subject-textarea{
  border:2px solid rgba(81,35,20,.3); background:#fff;
  color:var(--ink); resize:vertical; outline:none; position:relative; z-index:1;
  transition:border-color .15s, box-shadow .15s;
}
.subject-textarea:focus{
  border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,135,49,.22);
}
.subject-textarea::placeholder{ color:rgba(81,35,20,.35); }

/* ── Match highlights ───────────────────────────────────────────── */
mark.match{
  background:rgba(255,135,49,.35); color:inherit; border-radius:3px;
  outline:1.5px solid var(--orange);
}
mark.match.active{ background:rgba(255,170,1,.55); outline-color:var(--yellow); }

/* ── Match list ─────────────────────────────────────────────────── */
.match-item{
  font-family:"Space Mono",monospace; font-size:12px; border-radius:12px;
  border:1.5px solid rgba(81,35,20,.15); background:#fff; padding:10px 14px;
}
.match-idx{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:var(--orange);
  color:var(--cream); font-size:10px; font-family:"Space Mono",monospace;
  flex-shrink:0;
}

/* ── Flags toggle pills ─────────────────────────────────────────── */
.flag-btn{
  cursor:pointer; font-family:"Space Mono",monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.1em;
  border:2px solid var(--ink); border-radius:999px; padding:5px 12px;
  background:#fff; color:var(--ink); box-shadow:0 3px 0 var(--ink);
  transition:transform .12s, box-shadow .12s, background .15s, color .15s;
  user-select:none;
}
.flag-btn:hover{ transform:translateY(-1px); box-shadow:0 5px 0 var(--ink); }
.flag-btn:active{ transform:translateY(2px); box-shadow:0 0 0 var(--ink); }
.flag-btn.active{ background:var(--brown); color:var(--cream); }

/* ── Replace input ──────────────────────────────────────────────── */
.replace-input{
  width:100%; border:2px solid rgba(81,35,20,.3); border-radius:14px;
  background:#fff; padding:12px 16px; font-family:"Space Mono",monospace;
  font-size:14px; color:var(--ink); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.replace-input:focus{
  border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,135,49,.22);
}

/* ── Section typography ─────────────────────────────────────────── */
.kick{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Space Mono",monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:.15em; color:rgba(81,35,20,.55);
}
.sec-title{
  font-family:"Fredoka One",cursive; font-weight:400; letter-spacing:-0.01em;
  line-height:.95; color:var(--brown); margin-top:14px;
  font-size:clamp(30px,5vw,52px);
}
.prose-p{ margin-top:18px; font-size:17px; line-height:1.65; color:rgba(26,13,7,.78); }
.code-inline{
  font-family:"Space Mono",monospace; font-size:.92em;
  background:rgba(81,35,20,.08); border-radius:6px; padding:1px 6px; color:var(--brown);
}
.code-block{
  margin-top:18px; font-family:"Space Mono",monospace; font-size:14px;
  background:var(--ink); color:var(--cream); border-radius:14px; padding:18px 20px;
  overflow-x:auto; box-shadow:0 5px 0 rgba(26,13,7,.25);
}

/* ── Ads ────────────────────────────────────────────────────────── */
.ad-wrap{
  max-width:1100px; margin-left:auto; margin-right:auto;
  padding-left:20px; padding-right:20px;
}
.ad-placeholder{
  display:flex; align-items:center; justify-content:center;
  min-height:100px; border:1.5px dashed rgba(81,35,20,.25); border-radius:14px;
  background:rgba(81,35,20,.03);
}

/* ── Misc ───────────────────────────────────────────────────────── */
details summary::-webkit-details-marker{ display:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}