/* ----------------------------------------------------------------
   Design tokens - mirrors copycatbettor.com's /style.css so this
   tool feels like part of the site rather than a bolted-on form.
   ---------------------------------------------------------------- */
:root{
  --bg:#FFFFFF;
  --paper:#FAFAF8;
  --ink:#14171A;
  --dim:#6B7280;
  --navy:#1D3557;
  --win:#1F7A4C;
  --loss:#B23A32;
  --line:#E3E3DE;
}
html[data-theme="dark"]{
  --bg:#12151A;
  --paper:#1A1E24;
  --ink:#EDEAE2;
  --dim:#8B9099;
  --navy:#7BA0CC;
  --win:#5FA772;
  --loss:#D06860;
  --line:#33383F;
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter',sans-serif; font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background .15s, color .15s;
}

.wrap{max-width:1200px; margin:0 auto; padding:0 24px;}
.content{max-width:640px; margin:0 auto; padding:32px 0 60px;}

/* --- Header / nav / theme toggle (matches site header.php) --- */

header{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 0; border-bottom:2px solid var(--ink);
}
.brand{display:flex; align-items:center; gap:10px;}
header a.brand-link{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);}
.brand-mark{
  width:36px; height:36px; border-radius:50%; background:var(--ink); color:var(--bg);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
  font-family:'Archivo',sans-serif; font-weight:800; font-size:14px;
}
.brand-mark img{width:100%; height:100%; object-fit:cover; display:block;}
.brand-name{font-family:'Archivo',sans-serif; font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:0.03em;}
nav.site-nav{display:flex; align-items:center; gap:26px;}
nav.site-nav a{color:var(--dim); text-decoration:none; font-size:13px; font-weight:500; text-transform:uppercase; letter-spacing:0.04em;}
nav.site-nav a:hover{color:var(--ink);}
nav.site-nav a.active{color:var(--ink); border-bottom:2px solid var(--navy); padding-bottom:2px;}
.theme-toggle{
  display:flex; align-items:center; gap:6px; background:none; border:1px solid var(--ink);
  border-radius:20px;
  color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:11px;
  text-transform:uppercase; letter-spacing:0.05em; padding:6px 12px; cursor:pointer;
}
.theme-toggle:hover{background:var(--paper);}

footer.site-footer{
  padding:24px 0 40px; display:flex; justify-content:space-between; align-items:center;
  color:var(--dim); font-size:13px;
}
footer.site-footer a{color:var(--dim);}

/* --- Headings / page title --- */

h1.page-title{
  font-family:'Archivo',sans-serif; font-weight:800; font-size:26px;
  text-transform:uppercase; letter-spacing:-0.01em; margin-bottom:6px;
}
p.page-sub{color:var(--dim); font-size:13px; margin-bottom:24px;}
p.page-sub a{color:var(--navy);}

.mono{font-family:'IBM Plex Mono',monospace;}
.pos{color:var(--win);}
.neg{color:var(--loss);}

/* --- Alert (validation errors) --- */

.alert-error{
  border:1px solid var(--loss); border-radius:14px; padding:14px 16px;
  color:var(--loss); font-size:13px; font-weight:500; margin-bottom:20px;
  background:var(--paper);
}

/* --- Warning (negative juice) --- */

.alert-warn{
  border:1px solid var(--loss); border-radius:14px; padding:14px 16px;
  color:var(--ink); font-size:13px; margin-bottom:20px;
  background:var(--paper);
}
.alert-warn strong{color:var(--loss);}

/* --- Card --- */

.card{
  border:1px solid var(--line); border-radius:14px; padding:24px;
  background:var(--bg);
}

/* --- Form --- */

.form-group{margin-bottom:18px;}
.form-label{
  display:block; margin-bottom:6px; font-size:12px; font-weight:500;
  color:var(--dim); text-transform:uppercase; letter-spacing:0.04em;
}
.form-label a{color:var(--navy); text-transform:none; letter-spacing:0; font-weight:500;}

.text-input, .small-input, select.devig-select{
  width:100%; max-width:600px;
  font-family:'IBM Plex Mono',monospace; font-size:13px;
  color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:8px;
  padding:10px 12px;
  transition:border-color .15s;
}

/* iOS Safari zooms the page on focus if an input's font-size is under
   16px — force 16px on touch-sized viewports to keep focus from zooming. */
@media (max-width:600px){
  .text-input, .small-input, select.devig-select{font-size:16px;}
}
.text-input:focus, .small-input:focus, select.devig-select:focus{
  outline:none; border-color:var(--navy);
}
.small-input{width:80px; max-width:none;}
select.devig-select{width:auto; min-width:200px;}

.inline-row{display:flex; flex-wrap:wrap; align-items:end; gap:18px;}
.checkbox-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:10px;}
.checkbox-item{
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--ink);
}
.checkbox-item input[type="checkbox"]{accent-color:var(--navy);}

/* --- Pill toggle group (sharp book / devig method style choices) --- */

.toggle-group{display:flex; flex-wrap:wrap; gap:8px;}
.toggle-label{
  cursor:pointer; user-select:none; white-space:nowrap;
  font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:0.03em; color:var(--dim);
  border:1px solid var(--line); border-radius:20px; padding:6px 12px;
  transition:border-color .15s, color .15s, background .15s;
}
.toggle-label:hover{border-color:var(--navy); color:var(--ink);}
.toggle-label input[type="radio"]{display:none;}
.toggle-label:has(input[type="radio"]:checked){
  background:var(--ink); color:var(--bg); border-color:var(--ink);
}

/* --- Buttons --- */

.btn-primary{
  font-family:'Archivo',sans-serif; font-weight:800; font-size:13px;
  text-transform:uppercase; letter-spacing:0.04em;
  background:var(--ink); color:var(--bg);
  border:1px solid var(--ink); border-radius:10px;
  padding:12px 22px; cursor:pointer;
  transition:opacity .15s;
}
.btn-primary:hover{opacity:0.85;}

a.btn-link{
  display:inline-block;
  font-family:'Archivo',sans-serif; font-weight:600; font-size:13px;
  text-transform:uppercase; letter-spacing:0.03em;
  color:var(--navy); text-decoration:none;
  border:1px solid var(--line); border-radius:10px;
  padding:10px 16px;
  transition:border-color .15s;
}
a.btn-link:hover{border-color:var(--navy);}

.copy-btn{
  font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase;
  letter-spacing:0.04em; color:var(--navy); text-decoration:none;
  border:1px solid var(--line); border-radius:20px; padding:6px 14px;
  cursor:pointer; background:none; transition:border-color .15s;
}
.copy-btn:hover{border-color:var(--navy);}

/* --- Results --- */

.result-card{
  border:1px solid var(--line); border-radius:14px; padding:20px;
  margin-bottom:20px; transition:border-color .15s;
}
.result-card:hover{border-color:var(--navy);}

.result-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.result-badge{
  font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:500;
}
.method-tag{
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.05em; padding:4px 10px; border-radius:20px;
  border:1px solid var(--line); color:var(--dim);
}

.result-row{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:8px 0; border-top:1px solid var(--line);
  font-size:13px;
}
.result-row:first-of-type{border-top:none;}
.result-row .label{color:var(--dim); text-transform:uppercase; font-size:11px; letter-spacing:0.05em; font-family:'IBM Plex Mono',monospace;}
.result-row .value{font-family:'IBM Plex Mono',monospace; font-weight:500;}

.leg-juice-list{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 4px;}
.leg-chip{
  font-family:'IBM Plex Mono',monospace; font-size:12px;
  border:1px solid var(--line); border-radius:8px; padding:6px 10px;
}

.note{
  font-size:12px; color:var(--dim); font-style:italic;
  border-top:1px solid var(--line); padding-top:10px; margin-top:4px;
}

.section-title{
  font-family:'Archivo',sans-serif; font-weight:800; font-size:12px;
  text-transform:uppercase; letter-spacing:0.05em; color:var(--dim);
  margin:20px 0 8px;
}

.result-footer{display:flex; align-items:center; justify-content:space-between; margin-top:14px;}

.action-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px;}

/* --- Help page --- */

.help section{margin-top:36px; scroll-margin-top:16px;}
.help h2{
  font-family:'Archivo',sans-serif; font-weight:800; font-size:18px;
  text-transform:uppercase; letter-spacing:0.01em; margin-bottom:10px;
}
.help h3{
  font-family:'Archivo',sans-serif; font-weight:600; font-size:15px;
  margin:22px 0 8px; scroll-margin-top:16px;
}
.help p{margin-bottom:10px;}
.help ul{margin:0 0 10px 20px;}
.help li{margin-bottom:6px;}
.help a{color:var(--navy);}
.help code{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px;
  background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:1px 5px;
  white-space:nowrap;
}
.help dl{border-top:1px solid var(--line);}
.help dt{font-weight:500; padding-top:12px;}
.help dd{color:var(--dim); padding-bottom:12px; border-bottom:1px solid var(--line);}
.help dd strong, .help dd code{color:var(--ink);}

.toc{display:flex; flex-wrap:wrap; gap:8px; padding:16px;}
.toc a{
  font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:0.03em; color:var(--dim); text-decoration:none;
  border:1px solid var(--line); border-radius:20px; padding:5px 11px;
  transition:border-color .15s, color .15s;
}
.toc a:hover{border-color:var(--navy); color:var(--ink);}

.example-table{border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:12px 0 4px;}
.ex-row{display:flex; gap:14px; align-items:baseline; padding:10px 14px; border-top:1px solid var(--line);}
.ex-row:first-child{border-top:none;}
.ex-row code{flex:0 0 auto; min-width:0; white-space:normal; word-break:break-all;}
.ex-row span{color:var(--dim); font-size:13px;}
@media (max-width:600px){
  .ex-row{flex-direction:column; gap:4px;}
}

.badge{
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.05em; color:var(--navy);
  border:1px solid var(--navy); border-radius:20px; padding:1px 7px; margin-left:4px;
}

.cta{margin-top:40px;}
.cta p{margin-bottom:14px;}

@media (max-width:600px){
  header{flex-wrap:wrap; gap:14px; padding:16px 0; position:relative;}
  /* Lift the theme toggle out of the nav row onto the brand row (top-right),
     so the nav links get the full width on phones. Mirrors the site's style.css. */
  .theme-toggle{position:absolute; top:18px; right:0; height:32px;}
  .brand-name{font-size:14px;}
  nav.site-nav{width:100%; justify-content:space-between; gap:14px;}
  .content{padding:24px 0 48px;}
  .card{padding:18px;}
  footer.site-footer{flex-direction:column; gap:8px; align-items:flex-start;}
}