/* Free Hash Generator — 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); }

/* ── Algorithm tabs ─────────────────────────────────────────────── */
.algo-tab{
  cursor:pointer; font-family:"Space Mono",monospace; font-size:12px;
  text-transform:uppercase; letter-spacing:.08em;
  border:2px solid var(--ink); border-radius:999px; padding:8px 16px;
  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;
}
.algo-tab:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--ink); background:var(--yellow); }
.algo-tab:active{ transform:translateY(3px); box-shadow:0 0 0 var(--ink); }
.algo-tab.active{ background:var(--orange); color:var(--cream); border-color:var(--ink); }

/* ── Input textarea ─────────────────────────────────────────────── */
.hash-input{
  width:100%; border:2px solid rgba(81,35,20,.3); border-radius:16px;
  background:#fff; padding:16px 18px; font-size:15px; font-family:"DM Sans",system-ui,sans-serif;
  color:var(--ink); resize:vertical; min-height:120px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.hash-input:focus{
  border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,135,49,.22);
}
.hash-input::placeholder{ color:rgba(81,35,20,.35); }

/* ── Output field ───────────────────────────────────────────────── */
.hash-output{
  font-family:"Space Mono",monospace; font-size:13px; line-height:1.6;
  word-break:break-all; letter-spacing:.02em;
}
.hash-empty{ color:rgba(81,35,20,.35); font-style:italic; }

/* ── Case toggle ────────────────────────────────────────────────── */
.case-btn{ cursor:pointer; transition:background .15s,color .15s; }

/* ── 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);
}

/* ── Copy button ────────────────────────────────────────────────── */
.copy-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 14px;
  background:#fff; color:var(--ink); box-shadow:0 3px 0 var(--ink);
  transition:transform .12s, box-shadow .12s, background .15s, color .15s;
}
.copy-btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 5px 0 var(--ink); }
.copy-btn:active:not(:disabled){ transform:translateY(2px); box-shadow:0 0 0 var(--ink); }
.copy-btn:disabled{ opacity:.35; cursor:not-allowed; }
.copy-btn.copied{ background:var(--green); color:var(--cream); }

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

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

/* ════════════════════════════════════════════════════════════════ *
 *  Persona Generator — wizard + card components
 * ════════════════════════════════════════════════════════════════ */

/* ── Form fields ────────────────────────────────────────────────── */
.pg-label{
  display:block; font-family:"Space Mono",monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.12em; color:rgba(81,35,20,.6);
  margin-bottom:7px;
}
.pg-input{
  width:100%; border:2px solid rgba(81,35,20,.2); border-radius:14px;
  background:#FAF5EC; color:#1a0d07; padding:10px 14px;
  font-size:15px; font-family:"DM Sans",system-ui,sans-serif; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.pg-input:focus{
  border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,135,49,.22);
}
.pg-input::placeholder{ color:rgba(81,35,20,.35); }
select.pg-input{ cursor:pointer; }

/* ── Buttons ────────────────────────────────────────────────────── */
.pg-btn-primary{
  cursor:pointer; font-family:"Space Mono",monospace; font-size:12px;
  text-transform:uppercase; letter-spacing:.12em;
  border:2px solid var(--ink); border-radius:999px; padding:9px 22px;
  background:var(--orange); color:var(--cream); box-shadow:0 4px 0 var(--ink);
  transition:transform .12s, box-shadow .12s, background .15s, color .15s;
}
.pg-btn-primary:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 6px 0 var(--ink); }
.pg-btn-primary:active:not(:disabled){ transform:translateY(3px); box-shadow:0 0 0 var(--ink); }
.pg-btn-primary:disabled{ opacity:.35; cursor:not-allowed; }
.pg-btn-ghost{
  cursor:pointer; font-family:"Space Mono",monospace; font-size:12px;
  text-transform:uppercase; letter-spacing:.12em;
  border:2px solid var(--ink); border-radius:999px; padding:9px 18px;
  background:#fff; color:var(--ink); box-shadow:0 4px 0 var(--ink);
  transition:transform .12s, box-shadow .12s, background .15s, color .15s;
}
.pg-btn-ghost:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 6px 0 var(--ink); background:var(--yellow); }
.pg-btn-ghost:active:not(:disabled){ transform:translateY(3px); box-shadow:0 0 0 var(--ink); }
.pg-btn-ghost:disabled{ opacity:.35; cursor:not-allowed; }

/* ── Stepper pills ──────────────────────────────────────────────── */
.pg-step-pill{
  cursor:pointer; font-family:"Space Mono",monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:.08em;
  border:2px solid var(--ink); border-radius:999px; padding:5px 12px;
  background:#fff; color:var(--ink);
  transition:background .15s, color .15s;
}
.pg-step-pill:hover{ background:var(--yellow); }
.pg-step-pill.active{ background:var(--orange); color:var(--cream); }
.pg-step-pill.done{ background:var(--green); color:var(--cream); }

/* ── Checkboxes (chip style) ────────────────────────────────────── */
.pg-check{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:"Space Mono",monospace; font-size:12px;
  border:2px solid rgba(81,35,20,.25); border-radius:999px; padding:5px 12px;
  background:#fff; color:var(--ink); transition:border-color .15s, background .15s;
  user-select:none;
}
.pg-check:hover{ border-color:var(--orange); }
.pg-check input{ accent-color:var(--orange); }
.pg-check:has(input:checked){ background:var(--green); color:var(--cream); border-color:var(--ink); }

/* ── Interest tags (removable) ──────────────────────────────────── */
.pg-tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"Space Mono",monospace; font-size:11px;
  border:2px solid var(--ink); border-radius:999px; padding:3px 10px;
  background:var(--cream); color:var(--ink);
}
.pg-tag button{ cursor:pointer; border:none; background:none; color:var(--red); font-weight:700; line-height:1; }

/* ── Persona card ───────────────────────────────────────────────── */
.pg-card{
  border:2px solid var(--ink); border-radius:18px; background:#fff;
  box-shadow:0 8px 0 var(--ink); overflow:hidden;
  font-family:"DM Sans",system-ui,sans-serif; color:var(--ink);
}
.pg-card-head{
  display:flex; align-items:center; gap:14px;
  background:var(--green); color:var(--cream); padding:18px 20px;
}
.pg-avatar{
  width:84px; height:84px; flex-shrink:0; border-radius:14px; overflow:hidden;
  border:2px solid var(--ink); background:#fff;
}
.pg-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.pg-card-name{ font-family:"Fredoka One",cursive; font-weight:400; font-size:22px; line-height:1.05; }
.pg-card-role{ font-family:"Space Mono",monospace; font-size:12px; opacity:.85; margin-top:3px; }
.pg-card-body{ padding:18px 20px; display:grid; gap:16px; }
.pg-block-title{
  font-family:"Space Mono",monospace; font-size:10px; text-transform:uppercase;
  letter-spacing:.14em; color:var(--brown); opacity:.7; margin-bottom:7px;
}
.pg-dl{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:13px; }
.pg-dl dt{ color:rgba(26,13,7,.55); font-family:"Space Mono",monospace; font-size:11px; }
.pg-dl dd{ color:var(--ink); }
.pg-list{ list-style:none; display:grid; gap:5px; font-size:13px; }
.pg-list li{ position:relative; padding-left:16px; line-height:1.4; }
.pg-list li::before{ content:""; position:absolute; left:0; top:6px; width:7px; height:7px; border-radius:2px; background:var(--orange); }
.pg-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.pg-tags span{
  font-family:"Space Mono",monospace; font-size:11px;
  border:1.5px solid rgba(81,35,20,.25); border-radius:999px; padding:2px 9px;
  background:var(--cream); color:var(--brown);
}
.pg-quote{
  border-left:3px solid var(--orange); padding:6px 0 6px 14px;
  font-style:italic; color:rgba(26,13,7,.8); font-size:14px;
}

/* ── Saved persona row ──────────────────────────────────────────── */
.pg-saved-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:2px solid rgba(81,35,20,.2); border-radius:12px; padding:8px 12px; background:#fff;
}
.pg-saved-row .pg-saved-name{ font-family:"DM Sans",sans-serif; font-size:14px; color:var(--ink); }
.pg-saved-row .pg-saved-meta{ font-family:"Space Mono",monospace; font-size:11px; color:rgba(81,35,20,.5); }

/* ── Print ──────────────────────────────────────────────────────── */
@media print{
  body * { visibility:hidden !important; }
  #personaCard, #personaCard * { visibility:visible !important; }
  #personaCard{
    position:absolute; left:0; top:0; width:100%;
    box-shadow:none !important; border:1px solid var(--ink) !important;
  }
}