/* KittyButts Tools — shared design system */
:root{
  --bg:#FFF8EF; --card:#FFFDF9; --ink:#2E2018; --muted:#7A6753;
  --accent:#E4572E; --accent-dark:#C7431F; --teal:#1F7A6D; --gold:#F2A93B;
  --line:#F0DFCE; --soft:#FDEBD9; --green:#2E7D4F; --amber:#9A6B00; --red:#B03A2E;
  --shadow:0 10px 30px rgba(94,52,18,.10), 0 2px 6px rgba(94,52,18,.06);
  --radius:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.6; font-size:16.5px;
  background-image:radial-gradient(rgba(228,87,46,.05) 1.5px, transparent 1.6px);
  background-size:26px 26px;
}
h1,h2,h3{font-family:"Fraunces",Georgia,serif; line-height:1.2; margin:0}
a{color:var(--accent-dark)}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:6px}

/* Top bar */
.kb-topbar{
  position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center;
  padding:12px 22px; background:rgba(255,248,239,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.kb-brand{font-family:"Fraunces",serif; font-weight:800; font-size:1.25rem; color:var(--ink); text-decoration:none}
.kb-brand span{color:var(--accent); font-size:.95rem; margin-left:4px}
.kb-back{font-weight:700; text-decoration:none; font-size:.95rem}
.kb-back:hover{text-decoration:underline}

.kb-wrap{max-width:1120px; margin:0 auto; padding:28px 18px 56px}

/* Hero */
.kb-hero{text-align:left; margin:10px 0 26px}
.kb-eyebrow{letter-spacing:.14em; font-size:.78rem; font-weight:800; color:var(--teal); text-transform:uppercase}
.kb-hero h1{font-size:clamp(2rem,4.5vw,3rem); font-weight:800; margin:.18em 0 .3em}
.kb-lede{font-size:1.13rem; color:#5C4632; max-width:64ch; margin:0}
.kb-badges{margin-top:14px; display:flex; gap:8px; flex-wrap:wrap}
.kb-badge{background:var(--soft); border:1px solid var(--line); color:#8A4B12; font-weight:800; font-size:.8rem; padding:4px 12px; border-radius:999px}

/* Layout + cards */
.kb-layout{display:grid; grid-template-columns:400px 1fr; gap:22px; align-items:start}
@media (max-width:880px){ .kb-layout{grid-template-columns:1fr} }
.kb-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px}
.kb-card h2{font-size:1.35rem; margin-bottom:.5em}
.kb-form-card{position:sticky; top:76px}
@media (max-width:880px){ .kb-form-card{position:static} }
.kb-how{margin-top:22px}
.kb-disclaimer{color:var(--muted); font-size:.92rem; margin-top:18px}
.kb-footer{border-top:1px solid var(--line); padding:22px; text-align:center; color:var(--muted); font-size:.92rem; background:#FFFDF9}

/* Form fields */
.kb-field{margin-bottom:18px}
.kb-field label{display:block; font-weight:800; margin-bottom:6px; font-size:.98rem}
.kb-hint{font-size:.85rem; color:var(--muted); margin:4px 0 0}
.kb-field select,.kb-field input[type=number],.kb-field input[type=text],.kb-field input[type=date]{
  width:100%; padding:12px 14px; border:1.5px solid #E3CDB2; border-radius:12px; font-size:1rem;
  background:#fff; font-family:inherit; color:var(--ink);
}
.kb-field select:focus,.kb-field input:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(228,87,46,.15)}

/* Range slider */
.kb-range-row{display:flex; align-items:center; gap:12px}
.kb-range{flex:1; -webkit-appearance:none; appearance:none; height:8px; border-radius:99px; background:linear-gradient(to right,var(--accent) var(--fill,50%),#F0DFCE var(--fill,50%)); cursor:pointer}
.kb-range::-webkit-slider-thumb{-webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:#fff; border:3px solid var(--accent); box-shadow:0 2px 6px rgba(0,0,0,.18); cursor:grab}
.kb-range::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--accent); cursor:grab}
.kb-range-val{background:var(--ink); color:#fff; font-weight:800; border-radius:10px; padding:3px 12px; min-width:64px; text-align:center; font-size:.95rem}

/* Segmented choices */
.kb-seg{display:flex; flex-wrap:wrap; gap:8px}
.kb-seg label{position:relative; margin:0; cursor:pointer}
.kb-seg input{position:absolute; opacity:0; inset:0; cursor:pointer}
.kb-seg .kb-seg-opt{
  display:inline-block; padding:9px 14px; border:1.5px solid #E3CDB2; border-radius:999px; background:#fff;
  font-weight:700; font-size:.92rem; transition:all .15s ease;
}
.kb-seg input:checked + .kb-seg-opt{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 4px 12px rgba(228,87,46,.35)}
.kb-seg input:focus-visible + .kb-seg-opt{outline:3px solid var(--gold); outline-offset:2px}
.kb-seg label:hover .kb-seg-opt{border-color:var(--accent)}

/* Check tiles */
.kb-checks{display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media (max-width:520px){ .kb-checks{grid-template-columns:1fr} }
.kb-check-tile{position:relative; display:block; cursor:pointer; margin:0}
.kb-check-tile input{position:absolute; opacity:0; inset:0; cursor:pointer}
.kb-check-tile span{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border:1.5px solid #E3CDB2; border-radius:12px;
  background:#fff; font-weight:700; font-size:.9rem; transition:all .15s ease; height:100%;
}
.kb-check-tile input:checked + span{background:#EAF5F1; border-color:var(--teal); color:#14544B}
.kb-check-tile input:focus-visible + span{outline:3px solid var(--gold); outline-offset:2px}

/* Buttons */
.kb-btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff; border:0; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:1rem; padding:13px 24px; border-radius:14px;
  box-shadow:0 6px 16px rgba(228,87,46,.35); transition:transform .12s ease, background .15s ease;
}
.kb-btn:hover{background:var(--accent-dark); transform:translateY(-1px)}
.kb-btn:active{transform:translateY(0)}
.kb-btn-ghost{background:#fff; color:var(--accent-dark); border:2px solid var(--accent); box-shadow:none}
.kb-btn-ghost:hover{background:var(--soft); color:var(--accent-dark)}
.kb-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}

/* Stats */
.kb-stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin:14px 0}
.kb-stat{background:var(--soft); border:1px solid var(--line); border-radius:16px; padding:14px 12px; text-align:center}
.kb-stat-num{font-family:"Fraunces",serif; font-size:1.65rem; font-weight:800; color:var(--accent-dark); line-height:1.1}
.kb-stat-label{font-size:.8rem; font-weight:800; color:#8A5A2B; text-transform:uppercase; letter-spacing:.05em; margin-top:3px}

/* Progress */
.kb-progress{height:14px; background:#F3E4D2; border-radius:99px; overflow:hidden}
.kb-progress > i{display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--accent)); border-radius:99px; transition:width .5s ease}

/* Tables */
.kb-table{width:100%; border-collapse:collapse; font-size:.94rem; margin:10px 0}
.kb-table th,.kb-table td{border:1px solid var(--line); padding:9px 10px; text-align:left; vertical-align:top}
.kb-table th{background:var(--soft); font-weight:800}
.kb-table tr:nth-child(even) td{background:#FFFBF5}

/* Signals */
.kb-sig{margin:.35em 0; font-size:.97rem}
.kb-sig b.go{color:var(--green)} .kb-sig b.wait{color:var(--amber)} .kb-sig b.back{color:var(--red)}

/* Stage cards */
.kb-stage{border:1px solid var(--line); border-left:7px solid var(--accent); border-radius:14px; padding:16px 18px; margin:14px 0; background:#fff; animation:kbIn .35s ease both}
.kb-stage h3{font-size:1.12rem; margin-bottom:.25em}
.kb-stage .kb-days{color:var(--accent-dark); font-weight:800; font-family:"Nunito Sans",sans-serif; font-size:.9rem}
@keyframes kbIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* Tasks (interactive checklist) */
.kb-task{display:flex; gap:10px; align-items:flex-start; padding:9px 12px; border:1px solid var(--line); border-radius:12px; margin:7px 0; background:#fff; cursor:pointer; transition:background .15s}
.kb-task:hover{background:#FFFBF4}
.kb-task input{width:20px; height:20px; accent-color:var(--teal); margin-top:2px; flex:none; cursor:pointer}
.kb-task input:checked + span{color:var(--muted); text-decoration:line-through}

/* Pills, alerts */
.kb-pill{display:inline-block; background:var(--soft); border-radius:999px; padding:2px 11px; font-size:.83rem; font-weight:700; margin:2px 3px 2px 0}
.kb-alert{border-radius:14px; padding:13px 16px; margin:12px 0; font-size:.96rem; border:1px solid}
.kb-alert.warn{background:#FDF3E0; border-color:#EDD9A8; color:#6B4E00}
.kb-alert.good{background:#EAF5EE; border-color:#BFE3CC; color:#1E5631}
.kb-alert.info{background:#EAF3F5; border-color:#BFDCE3; color:#175263}

/* Score ring (SVG injected by tools) */
.kb-score-wrap{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.kb-verdict{font-family:"Fraunces",serif; font-size:1.3rem; font-weight:800}

/* Hub grid */
.kb-hub-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; margin-top:8px}
.kb-tool-card{
  display:block; text-decoration:none; color:var(--ink); background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); transition:transform .15s ease, box-shadow .15s ease;
}
.kb-tool-card:hover{transform:translateY(-4px); box-shadow:0 18px 38px rgba(94,52,18,.16)}
.kb-tool-card .kb-tool-emoji{font-size:2.1rem}
.kb-tool-card h2{font-size:1.3rem; margin:.35em 0 .3em}
.kb-tool-card p{color:#5C4632; margin:0 0 12px; font-size:.97rem}
.kb-tool-card .kb-go{font-weight:800; color:var(--accent-dark)}

/* Toast */
.kb-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); background:var(--ink); color:#fff;
  padding:11px 20px; border-radius:12px; font-weight:700; opacity:0; pointer-events:none; transition:all .25s ease; z-index:99;
}
.kb-toast.show{opacity:1; transform:translate(-50%,0)}

/* Print: only the result card */
@media print{
  body{background:#fff; background-image:none; font-size:12.5pt}
  .kb-topbar,.kb-hero,.kb-form-card,.kb-how,.kb-footer,.kb-disclaimer,.no-print,.kb-toast{display:none!important}
  .kb-wrap{padding:0}
  .kb-layout{grid-template-columns:1fr}
  .kb-card{box-shadow:none; border:0; padding:0}
  .kb-stage,.kb-task{break-inside:avoid}
}