/* ===== Friendly tool UI layer — loaded after each tool's own styles ===== */
:root{
  --tile:#FAF6EE; --tile-line:#E3E8DC; --pick:#DCE7D5; --pick-line:#5F7355;
  --r-card:24px; --r-tile:16px;
  --shadow:0 10px 30px -12px rgba(62,79,51,.18), 0 2px 6px rgba(62,79,51,.05);
}

/* cards */
.tool-card,.form-card,.search-card,#result{
  border-radius:var(--r-card) !important; border:1px solid #EDE7DB !important;
  box-shadow:var(--shadow); overflow:hidden;
}
#result{border-top:1px solid #EDE7DB !important;}
#result::before{content:"";display:block;height:6px;margin:-32px -34px 26px;background:linear-gradient(90deg,#8A9A7E,#C98A96);}

/* steps */
.step{border-bottom:1px dashed #E7E0D3 !important;}
.step h3{font-family:'Karla',sans-serif !important;font-weight:700 !important;font-size:18.5px !important;
  color:var(--ink);display:flex;align-items:center;gap:10px;line-height:1.35;}
.step h3 .ico{font-size:22px;line-height:1;flex-shrink:0;}
.step-num{display:inline-block;background:#EEF2EA;color:var(--sage-dark) !important;border-radius:999px;
  padding:4px 12px;font-size:11.5px !important;font-weight:700;letter-spacing:.08em !important;}

/* option tiles — pattern: <span class="opt"><input><label> */
.opt label{border-radius:var(--r-tile) !important;background:var(--tile) !important;
  border:1.5px solid var(--tile-line) !important;color:var(--ink-soft) !important;font-weight:500;
  transition:transform .12s, background .15s, border-color .15s, box-shadow .15s !important;}
.opt label:hover{border-color:#B9C7AE !important;transform:translateY(-1px);box-shadow:0 4px 12px -6px rgba(62,79,51,.25);}
.opt input:checked + label{background:var(--pick) !important;border:2px solid var(--pick-line) !important;
  color:#3E5233 !important;font-weight:700;box-shadow:0 4px 14px -6px rgba(62,79,51,.35);}
.opt input:checked + label span{color:#4E6343;opacity:.9;font-weight:500;}
.opt.urgent input:checked + label{background:#F6DEDE !important;border-color:#B55F5F !important;color:#7A2E2E !important;}

/* tile grids: short options become big square-ish tiles with the emoji on top */
.opt-row{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px !important;}
.opt-row .opt label{text-align:center;padding:16px 10px !important;min-height:100%;display:flex !important;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:14.5px;}
.opt label .em{display:block;float:left;font-size:24px;line-height:1;margin:1px 14px 4px 0;opacity:1 !important;}
.opt label:has(.em){position:relative;padding-left:56px !important;}
.opt label:has(.em) .em{position:absolute;left:18px;top:50%;transform:translateY(-50%);float:none;margin:0;}
.opt-row .opt label:has(.em){padding-left:10px !important;}
.opt-row .opt label:has(.em) .em{position:static;transform:none;}
.opt-row .opt label .em{float:none;margin:0 0 6px;font-size:30px;}
.opt-row .opt label::after{display:none;}
.opt-col .opt label,.grid2 .opt label{padding:14px 18px !important;}

/* pattern: <label class="opt"><input><span> (diastasis check) */
label.opt{border-radius:var(--r-tile) !important;background:var(--tile) !important;border:1.5px solid var(--tile-line) !important;
  padding:15px 18px !important;transition:all .15s;}
label.opt:hover{border-color:#B9C7AE !important;}
label.opt.checked,label.opt:has(input:checked){background:var(--pick) !important;border:2px solid var(--pick-line) !important;}
label.opt.checked strong,label.opt:has(input:checked) strong{color:#3E5233;}

/* inputs */
.date-input,#foodSearch,.time-row select,select,input[type=text],input[type=date]{
  border-radius:14px !important;border:1.5px solid var(--tile-line) !important;background:var(--tile) !important;
  padding:14px 16px !important;font-size:16px;}
.date-input:focus,#foodSearch:focus,select:focus{border-color:var(--pick-line) !important;background:#fff !important;outline:none;
  box-shadow:0 0 0 4px rgba(138,154,126,.18);}

/* buttons */
.tool-actions{background:transparent !important;border-top:none;}
.btn-primary,button.btn-primary{border-radius:999px !important;padding:15px 30px !important;font-weight:700 !important;
  background:var(--sage-dark) !important;color:#fff !important;box-shadow:0 8px 20px -8px rgba(62,79,51,.55);
  transition:transform .12s, box-shadow .15s;}
.btn-primary:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 12px 24px -8px rgba(62,79,51,.6);}
.btn-outline{border-radius:999px !important;padding:11px 22px !important;border-width:1.5px !important;}
.filters button{border-radius:999px !important;}
#resetBtn{border-radius:999px;}

/* result + notice boxes */
.tier,.redflag,.emergency,.disclaimer,.note,.honest,.reassure,.keynote,.tear-note,.preg-flag,.checkbox-note,.stage-note,.tip,.resources{
  border-radius:18px !important;}
.emergency{box-shadow:0 6px 18px -10px rgba(169,80,80,.35);}
.res-cta{background:#FBF4F5;border:none !important;border-radius:18px;padding:22px 24px !important;margin-top:26px !important;}
.product-link{display:inline-block;background:#fff;border:1.5px solid #E6CBD1;border-radius:999px;padding:8px 16px;
  text-decoration:none !important;font-weight:700;color:#A0606E !important;}
.product-link:hover{background:#C98A96;color:#fff !important;border-color:#C98A96;}
.res-cta .product-link{border-bottom:1.5px solid #E6CBD1;}
.block ul li::marker{color:var(--sage);}
.tbl{border-radius:16px;overflow:hidden;border-collapse:separate !important;border-spacing:0;border:1px solid var(--line);}
.tbl th,.tbl td{border:none !important;border-bottom:1px solid var(--line) !important;}
.tbl tr:last-child td{border-bottom:none !important;}


/* result tips as soft cream boxes with a leaf, like the check-in card */
#result .block ul,#result ul.tips{list-style:none !important;margin:0 !important;padding:0 !important;display:grid;gap:10px;}
#result .block li{background:var(--tile);border-radius:14px;padding:13px 16px 13px 44px !important;margin:0 !important;
  position:relative;color:var(--ink) !important;font-size:15px;line-height:1.5;}
#result .block li::before{content:"🌿";position:absolute;left:15px;top:12px;font-size:16px;}
#result .block h4{font-family:'Fraunces',serif;color:var(--sage-dark);}

/* timelines & FAQ as soft cards */
.tl-item{background:var(--paper);border:1px solid #EDE7DB !important;border-radius:18px;padding:20px 22px !important;margin-bottom:12px;}
.timeline .tl-item{background:var(--cream);}
.faq-item{background:var(--paper);border:1px solid #EDE7DB !important;border-radius:18px;padding:20px 24px !important;margin-bottom:12px;}
.faq-item h3::before{content:"💬";margin-right:8px;}

@media(max-width:700px){
  .opt-row{grid-template-columns:repeat(2,1fr);}
  #result::before{margin:-24px -20px 20px;}
  .btn-primary,button.btn-primary{width:100%;text-align:center;justify-content:center;}
}
@media print{
  #result::before{display:none;}
  .tool-card,.form-card,#result{box-shadow:none;}
}

/* rounded details inside results */
#result button,#printBtn,#copyBtn,.print-row button,.msg-actions button,.msg-actions a{border-radius:999px !important;}
.bar{border-radius:14px !important;}
.stat{border-radius:18px !important;border-color:#EDE7DB !important;}
.week > *{border-radius:10px;}
.act{background:var(--paper);border:1px solid #EDE7DB !important;border-radius:18px;padding:18px 22px !important;margin:0 0 12px !important;}
.group-head{border-radius:14px;}
.verdict,.food-row,.food-item{border-radius:16px;}
textarea{border-radius:16px !important;}
.sign-wrap{border-radius:20px;}
.act-list{border:none !important;background:transparent !important;}
[class*="badge"],.pill{border-radius:999px !important;padding-left:12px !important;padding-right:12px !important;}

/* emoji rows: reserve space on the left (must come last to beat the padding rules above) */
.opt-col .opt label:has(.em),.grid2 .opt label:has(.em),.opt label:has(.em){padding-left:60px !important;position:relative;}
.opt-col .opt label:has(.em) .em,.grid2 .opt label:has(.em) .em{position:absolute;left:18px;top:50%;transform:translateY(-50%);margin:0;float:none;}
.opt-row .opt label:has(.em){padding-left:10px !important;}
#result .block.warn li::before{content:"⚠️";}
#result .block.warn li{background:#FDF3EC;}