/* =============================================================
   tools.css — interactive tool shells
   ============================================================= */

.sbt-tool{
  background:#fff; border-radius:var(--sbt-radius-lg); padding:var(--sbt-space-7);
  box-shadow:var(--sbt-shadow-2); margin-block:var(--sbt-space-6);
}
.sbt-tool__head{ text-align:center; max-width:60ch; margin:0 auto var(--sbt-space-6) }
.sbt-tool__head h1{ margin-bottom:var(--sbt-space-2) }
.sbt-tool__head p{ font-family:var(--sbt-font-editorial); font-size:1.15rem; color:color-mix(in srgb, var(--sbt-ink) 80%, transparent) }

.sbt-tool__no-js{
  background:var(--sbt-mist); padding:var(--sbt-space-5); border-radius:var(--sbt-radius-md);
  text-align:center;
}
.sbt-tool[data-mounted="true"] .sbt-tool__no-js{ display:none }

.sbt-tool__step{ display:none }
.sbt-tool__step.is-active{ display:block; animation:sbt-step-in var(--sbt-dur-2) var(--sbt-ease) }
@keyframes sbt-step-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

.sbt-tool__progress{ height:6px; background:var(--sbt-mist); border-radius:var(--sbt-radius-pill); overflow:hidden; margin-bottom:var(--sbt-space-5) }
.sbt-tool__progress-bar{ height:100%; background:linear-gradient(90deg, var(--sbt-spice), var(--sbt-herb)); transition:width var(--sbt-dur-2) var(--sbt-ease); width:0% }

.sbt-tool__options{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sbt-space-3); margin-block:var(--sbt-space-5) }
@media (max-width: 600px){ .sbt-tool__options{ grid-template-columns:1fr } }
.sbt-tool__option{
  display:flex; align-items:center; gap:var(--sbt-space-3); padding:var(--sbt-space-3) var(--sbt-space-4);
  background:var(--sbt-mist); border-radius:var(--sbt-radius-md); cursor:pointer;
  border:2px solid transparent; transition:all var(--sbt-dur-1) var(--sbt-ease); width:100%; text-align:left;
}
.sbt-tool__option:hover{ background:color-mix(in srgb, var(--sbt-sage) 30%, transparent); transform:translateY(-1px) }
.sbt-tool__option.is-selected{ background:color-mix(in srgb, var(--sbt-sage) 50%, transparent); border-color:var(--sbt-herb) }
.sbt-tool__option-icon{ font-size:1.5rem; flex-shrink:0 }
.sbt-tool__option-body{ display:flex; flex-direction:column }
.sbt-tool__option-title{ font-weight:600; color:var(--sbt-basil) }
.sbt-tool__option-desc{ font-size:.85rem; color:var(--sbt-rustic) }

.sbt-tool__nav{ display:flex; justify-content:space-between; gap:var(--sbt-space-3); margin-top:var(--sbt-space-6) }

.sbt-tool__result{
  background:linear-gradient(135deg, var(--sbt-mist) 0%, color-mix(in srgb, var(--sbt-sage) 30%, transparent) 100%);
  border-radius:var(--sbt-radius-lg); padding:var(--sbt-space-6); margin-top:var(--sbt-space-6);
  border:1px solid color-mix(in srgb, var(--sbt-rustic) 10%, transparent);
}
.sbt-tool__result h2{ margin-bottom:var(--sbt-space-3) }
.sbt-tool__result-actions{ display:flex; gap:var(--sbt-space-2); flex-wrap:wrap; margin-top:var(--sbt-space-4); padding-top:var(--sbt-space-4); border-top:1px solid color-mix(in srgb, var(--sbt-rustic) 12%, transparent) }

/* Meal planner grid */
.sbt-planner{ display:grid; grid-template-columns:240px 1fr; gap:var(--sbt-space-5) }
@media (max-width: 900px){ .sbt-planner{ grid-template-columns:1fr } }
.sbt-planner__sidebar{ background:var(--sbt-mist); border-radius:var(--sbt-radius-md); padding:var(--sbt-space-4); max-height:600px; overflow-y:auto }
.sbt-planner__recipes{ display:flex; flex-direction:column; gap:var(--sbt-space-2) }
.sbt-planner__recipe{
  padding:var(--sbt-space-3); background:#fff; border-radius:var(--sbt-radius-sm);
  cursor:grab; font-size:.88rem; box-shadow:var(--sbt-shadow-1);
}
.sbt-planner__recipe:active{ cursor:grabbing }
.sbt-planner__recipe.is-selected{
  background:color-mix(in srgb, var(--sbt-spice) 18%, #fff);
  border:2px solid var(--sbt-spice);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sbt-spice) 15%, transparent);
  margin:-2px; /* keep size stable when bordered */
}
.sbt-planner__hint{
  background:color-mix(in srgb, var(--sbt-spice) 12%, #fff);
  border:1px solid color-mix(in srgb, var(--sbt-spice) 35%, transparent);
  border-radius:var(--sbt-radius-md);
  padding:.6em .9em;
  margin:0 0 var(--sbt-space-3);
  font-size:.88rem;
  color:var(--sbt-rustic);
}
.sbt-planner__grid{
  display:grid; grid-template-columns:80px repeat(7, minmax(120px, 1fr)); gap:1px;
  background:color-mix(in srgb, var(--sbt-rustic) 15%, transparent);
  border-radius:var(--sbt-radius-md); overflow:hidden;
}
.sbt-planner__cell{ background:#fff; padding:var(--sbt-space-2); min-height:80px; font-size:.82rem }
.sbt-planner__cell--head{ background:var(--sbt-basil); color:var(--sbt-cream); font-weight:600; text-align:center }
.sbt-planner__cell--row{ background:var(--sbt-mist); font-weight:600; color:var(--sbt-basil); display:flex; align-items:center; justify-content:center }
.sbt-planner__cell.is-drop-target{ background:color-mix(in srgb, var(--sbt-spice) 30%, transparent); outline:2px dashed var(--sbt-spice) }
@media (max-width: 700px){ .sbt-planner__grid{ overflow-x:auto; display:block } .sbt-planner__grid > *{ display:inline-block; min-width:120px } }

/* Pantry */
.sbt-pantry__add{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto; gap:var(--sbt-space-2); align-items:end; margin-bottom:var(--sbt-space-5) }
@media (max-width: 760px){ .sbt-pantry__add{ grid-template-columns:1fr 1fr } }
.sbt-pantry__list{ display:grid; gap:var(--sbt-space-2) }
.sbt-pantry__row{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr auto; gap:var(--sbt-space-3); align-items:center;
  padding:var(--sbt-space-3); background:#fff; border-radius:var(--sbt-radius-sm); box-shadow:var(--sbt-shadow-1);
}
.sbt-pantry__row.is-expiring{ border-left:4px solid var(--sbt-spice) }
.sbt-pantry__tabs{ display:flex; gap:var(--sbt-space-2); margin-bottom:var(--sbt-space-4) }

/* Flavor pairing visualizer */
.sbt-wheel{ display:flex; justify-content:center; align-items:center; padding:var(--sbt-space-5) }
.sbt-wheel svg{ max-width:520px; width:100%; height:auto }
.sbt-wheel circle[data-pair]{ cursor:pointer; transition:transform var(--sbt-dur-1) var(--sbt-ease) }
.sbt-wheel circle[data-pair]:hover{ transform:scale(1.1); transform-origin:center }
.sbt-pairing-panel{
  background:#fff; border-radius:var(--sbt-radius-md); padding:var(--sbt-space-5);
  box-shadow:var(--sbt-shadow-1);
}

/* Quiz */
.sbt-quiz__question h2{ font-size:clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); margin-bottom:var(--sbt-space-4) }

/* Recipe generator chips */
.sbt-chip-input{
  display:flex; flex-wrap:wrap; gap:var(--sbt-space-2); padding:var(--sbt-space-2);
  border:1px solid color-mix(in srgb, var(--sbt-rustic) 25%, transparent); border-radius:var(--sbt-radius-sm);
  background:#fff;
}
.sbt-chip-input input{ flex:1; min-width:120px; border:0; padding:.5em; outline:0 }
.sbt-chip{
  display:inline-flex; align-items:center; gap:.4em; padding:.3em .75em;
  background:color-mix(in srgb, var(--sbt-sage) 35%, transparent); color:var(--sbt-basil);
  border-radius:var(--sbt-radius-pill); font-size:.85rem; font-weight:500;
}
.sbt-chip button{ font-weight:700; padding:0 .2em; color:var(--sbt-basil) }

/* Tool result KPIs */
.sbt-kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:var(--sbt-space-3); margin-bottom:var(--sbt-space-5) }
.sbt-kpi{
  background:#fff; border-radius:var(--sbt-radius-md); padding:var(--sbt-space-4); text-align:center;
  box-shadow:var(--sbt-shadow-1);
}
.sbt-kpi__value{ font-family:var(--sbt-font-display); font-size:2rem; font-weight:700; color:var(--sbt-basil); display:block }
.sbt-kpi__label{ font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--sbt-rustic); font-weight:600 }