/* ==========================================================================
   Wixy Soap Calculator - brand design system
   Owned by the theme agent. Styles the component classes the JS modules render.
   On-brand for wixysoap.com: deep green, sage, mist, soft rounded cards.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap");

/* --------------------------------------------------------------------------
   Brand tokens (do not invent colors elsewhere)
   -------------------------------------------------------------------------- */
:root{
  --wixy-green-deep: #144935;     /* hero/header background, primary brand green */
  --wixy-green-contrast: #195D44; /* hover/active green */
  --wixy-sage: #527C70;           /* primary action button, accents */
  --wixy-sage-dark: #3f6357;      /* button hover */
  --wixy-ink: #121212;            /* primary text */
  --wixy-ink-soft: #4a4a4a;       /* secondary text */
  --wixy-paper: #ffffff;          /* main background */
  --wixy-mist: #f5f5f5;           /* card/section background */
  --wixy-line: #e3e3e3;           /* borders */
  --wixy-line-strong: #cccccc;    /* input borders (matches her inputs) */
  --wixy-error: #dd1d1d;          /* validation errors */
  --wixy-radius: 12px;            /* cards */
  --wixy-radius-sm: 8px;          /* inputs, buttons */
  --wixy-font-body: "Outfit", system-ui, sans-serif;
  --wixy-font-head: Helvetica, Arial, sans-serif;  /* matches Wixy theme heading stack */
  --wixy-shadow: 0 1px 3px rgba(18,18,18,.08), 0 8px 24px rgba(18,18,18,.06);

  /* derived helpers (kept inside the brand palette) */
  --wixy-amber: #c9881f;          /* quality bar: slightly out of range */
  --wixy-red: var(--wixy-error);  /* quality bar: far out of range */
  --wixy-focus: rgba(82,124,112,.45); /* sage focus ring */
  --wixy-space: 16px;
}

/* --------------------------------------------------------------------------
   App shell
   -------------------------------------------------------------------------- */
.wixy-app{
  font-family: var(--wixy-font-body);
  font-weight: 300;
  color: var(--wixy-ink);
  background: var(--wixy-paper);
  line-height: 1.5;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 0 48px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.wixy-app *{ box-sizing: border-box; }

.wixy-app h1,
.wixy-app h2,
.wixy-app h3{
  font-family: var(--wixy-font-head);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.wixy-app strong,
.wixy-app b{ font-weight: 600; }

/* --------------------------------------------------------------------------
   Header band (deep green hero with logo)
   -------------------------------------------------------------------------- */
.wixy-header{
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--wixy-green-deep);
  background-image: linear-gradient(135deg, var(--wixy-green-deep) 0%, var(--wixy-green-contrast) 100%);
  color: var(--wixy-paper);
  padding: 28px 28px;
  border-radius: 0 0 var(--wixy-radius) var(--wixy-radius);
}
.wixy-header img,
.wixy-header .wixy-logo{
  height: 64px;
  width: 64px;
  flex: 0 0 auto;
  display: block;
  background: var(--wixy-paper);
  border-radius: 50%;
  padding: 4px;
  box-sizing: border-box;
  object-fit: contain;
  box-shadow: 0 2px 8px rgba(18,18,18,.22);
}
.wixy-header h1{
  color: var(--wixy-paper);
  font-size: 1.6rem;
  letter-spacing: .2px;
}
.wixy-header p,
.wixy-header .wixy-subtitle{
  margin: 4px 0 0;
  color: rgba(255,255,255,.82);
  font-size: .95rem;
  font-weight: 300;
}
.wixy-header .wixy-header-text{ min-width: 0; }

/* --------------------------------------------------------------------------
   Tab navigation
   -------------------------------------------------------------------------- */
.wixy-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 18px 20px 0;
  border-bottom: 1px solid var(--wixy-line);
  margin-bottom: 24px;
}
.wixy-tab{
  appearance: none;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  color: var(--wixy-ink-soft);
  font-family: var(--wixy-font-body);
  font-size: .98rem;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: var(--wixy-radius-sm) var(--wixy-radius-sm) 0 0;
  cursor: pointer;
  position: relative;
  top: 1px;
  transition: color .15s ease, background .15s ease;
}
.wixy-tab:hover{
  color: var(--wixy-green-deep);
  background: var(--wixy-mist);
}
.wixy-tab.is-active{
  color: var(--wixy-green-deep);
  background: var(--wixy-paper);
  border-color: var(--wixy-line);
  box-shadow: inset 0 3px 0 0 var(--wixy-sage);
}
.wixy-tab:focus-visible{
  outline: 2px solid var(--wixy-sage);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Panels (one per calculator tab)
   -------------------------------------------------------------------------- */
.wixy-panel{ display: none; padding: 0 20px; }
.wixy-panel.is-active{ display: block; animation: wixy-fade .2s ease; }
@keyframes wixy-fade{
  from{ opacity: 0; transform: translateY(4px); }
  to{ opacity: 1; transform: none; }
}
.wixy-panel > h2{
  font-size: 1.35rem;
  color: var(--wixy-green-deep);
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Cards / sections
   -------------------------------------------------------------------------- */
.wixy-card{
  background: var(--wixy-mist);
  border: 1px solid var(--wixy-line);
  border-radius: var(--wixy-radius);
  padding: 20px;
  margin-top: 18px;
  box-shadow: var(--wixy-shadow);
}
.wixy-card > h3{
  font-size: 1.05rem;
  color: var(--wixy-green-deep);
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */
.wixy-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.wixy-field:last-child{ margin-bottom: 0; }

.wixy-label{
  font-size: .9rem;
  font-weight: 600;
  color: var(--wixy-ink);
}

.wixy-input,
.wixy-select{
  width: 100%;
  font-family: var(--wixy-font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--wixy-ink);
  background: var(--wixy-paper);
  border: 1px solid var(--wixy-line-strong);
  border-radius: var(--wixy-radius-sm);
  padding: 11px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wixy-input::placeholder{ color: #9a9a9a; }

.wixy-select{
  appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23527C70' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}

.wixy-input:hover,
.wixy-select:hover{ border-color: var(--wixy-sage); }

.wixy-input:focus,
.wixy-select:focus{
  outline: none;
  border-color: var(--wixy-sage);
  box-shadow: 0 0 0 3px var(--wixy-focus);
}

.wixy-input[aria-invalid="true"],
.wixy-input.is-invalid{
  border-color: var(--wixy-error);
}
.wixy-input[aria-invalid="true"]:focus,
.wixy-input.is-invalid:focus{
  box-shadow: 0 0 0 3px rgba(221,29,29,.25);
}

/* number inputs: keep tidy spinners */
.wixy-input[type="number"]{ -moz-appearance: textfield; }

/* --------------------------------------------------------------------------
   Rows (oil entry lines: name select + weight + remove)
   -------------------------------------------------------------------------- */
.wixy-row{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}
.wixy-row .wixy-field{ margin-bottom: 0; }
.wixy-row .wixy-field--oil{ flex: 1 1 200px; min-width: 0; }
.wixy-row .wixy-field--weight{ flex: 0 1 130px; min-width: 90px; }
.wixy-row .wixy-btn-ghost{ flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.wixy-btn,
.wixy-btn-ghost{
  appearance: none;
  font-family: var(--wixy-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--wixy-radius-sm);
  padding: 12px 20px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.wixy-btn{
  background: var(--wixy-sage);
  color: var(--wixy-paper);
  border: 1px solid var(--wixy-sage);
}
.wixy-btn:hover{
  background: var(--wixy-sage-dark);
  border-color: var(--wixy-sage-dark);
}
.wixy-btn:active{ transform: translateY(1px); }

.wixy-btn-ghost{
  background: transparent;
  color: var(--wixy-sage-dark);
  border: 1px solid var(--wixy-line-strong);
}
.wixy-btn-ghost:hover{
  background: var(--wixy-paper);
  border-color: var(--wixy-sage);
  color: var(--wixy-green-deep);
}

.wixy-btn:focus-visible,
.wixy-btn-ghost:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--wixy-focus);
}

.wixy-btn:disabled,
.wixy-btn-ghost:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* small remove button variant inside oil rows */
.wixy-row .wixy-btn-ghost{
  padding: 11px 14px;
  font-size: .9rem;
}

/* --------------------------------------------------------------------------
   Results
   -------------------------------------------------------------------------- */
.wixy-result{
  background: var(--wixy-paper);
  border: 1px solid var(--wixy-line);
  border-left: 4px solid var(--wixy-sage);
  border-radius: var(--wixy-radius-sm);
  padding: 14px 16px;
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.wixy-result .wixy-result-label{
  font-size: .92rem;
  font-weight: 600;
  color: var(--wixy-ink-soft);
}
.wixy-result-num{
  font-family: var(--wixy-font-head);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--wixy-green-deep);
  white-space: nowrap;
}

/* grouped result grid for secondary numbers */
.wixy-result-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.wixy-result-grid .wixy-result{ margin-top: 0; }

/* --------------------------------------------------------------------------
   Errors and helper text
   -------------------------------------------------------------------------- */
.wixy-error{
  color: var(--wixy-error);
  font-size: .88rem;
  font-weight: 600;
  margin-top: 4px;
}
.wixy-error:empty{ display: none; }

.wixy-help{
  color: var(--wixy-ink-soft);
  font-size: .82rem;
  font-weight: 300;
  margin: 2px 0 0;
}
.wixy-panel > .wixy-help{ margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   Quality panel (bar-quality numbers with in-range / out-of-range bars)
   -------------------------------------------------------------------------- */
.wixy-quality{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.wixy-quality-row{
  display: grid;
  grid-template-columns: 110px 1fr 64px;
  align-items: center;
  gap: 12px;
}
.wixy-quality-name{
  font-size: .9rem;
  font-weight: 600;
  color: var(--wixy-ink);
}
.wixy-quality-bar{
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: #e7e7e7;
  overflow: hidden;
}
.wixy-quality-fill{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--wixy-sage);
  transition: width .3s ease, background .2s ease;
}
.wixy-quality-fill.in-range{ background: var(--wixy-green-contrast); }
.wixy-quality-fill.out-range{ background: var(--wixy-amber); }
.wixy-quality-fill.out-range.is-far{ background: var(--wixy-red); }

.wixy-quality-val{
  font-family: var(--wixy-font-head);
  font-weight: 700;
  font-size: 1rem;
  text-align: right;
  color: var(--wixy-green-deep);
}
.wixy-quality-val.out-range{ color: var(--wixy-amber); }
.wixy-quality-val.out-range.is-far{ color: var(--wixy-red); }

.wixy-quality-rowwrap{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wixy-quality-range{
  font-size: .76rem;
  font-weight: 300;
  color: var(--wixy-ink-soft);
}

/* --------------------------------------------------------------------------
   Notes / footnotes (e.g. "Built by Wixy Soap")
   -------------------------------------------------------------------------- */
.wixy-note{
  font-size: .82rem;
  font-weight: 300;
  color: var(--wixy-ink-soft);
  background: var(--wixy-mist);
  border: 1px dashed var(--wixy-line-strong);
  border-radius: var(--wixy-radius-sm);
  padding: 10px 14px;
  margin-top: 16px;
}

.wixy-footer{
  text-align: center;
  font-size: .8rem;
  color: var(--wixy-ink-soft);
  padding: 24px 20px 0;
}
.wixy-footer a{ color: var(--wixy-sage-dark); }

/* --------------------------------------------------------------------------
   Responsive (down to ~360px)
   -------------------------------------------------------------------------- */
@media (max-width: 600px){
  .wixy-header{
    padding: 22px 18px;
    border-radius: 0 0 var(--wixy-radius) var(--wixy-radius);
  }
  .wixy-header h1{ font-size: 1.3rem; }
  .wixy-header img,
  .wixy-header .wixy-logo{ height: 50px; width: 50px; }

  .wixy-tabs{ padding: 14px 14px 0; gap: 4px; }
  .wixy-tab{ padding: 10px 12px; font-size: .9rem; flex: 1 1 auto; text-align: center; }

  .wixy-panel{ padding: 0 14px; }
  .wixy-card{ padding: 16px; }

  .wixy-result{ flex-direction: column; align-items: flex-start; gap: 2px; }
  .wixy-result-num{ font-size: 1.35rem; }

  .wixy-quality-row{
    grid-template-columns: 1fr 52px;
    grid-template-areas:
      "name val"
      "bar  bar";
    row-gap: 6px;
  }
  .wixy-quality-name{ grid-area: name; }
  .wixy-quality-val{ grid-area: val; }
  .wixy-quality-bar{ grid-area: bar; }
}

@media (max-width: 380px){
  .wixy-row .wixy-field--oil,
  .wixy-row .wixy-field--weight{ flex: 1 1 100%; }
  .wixy-row .wixy-btn-ghost{ width: 100%; }
}

/* ==========================================================================
   ENHANCEMENTS (features 1-6) - additive styles for the new UI classes.
   All colors come from the existing --wixy-* tokens above. Nothing above
   this line was changed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Feature 1: input mode toggle (by weight / by percent) + live composition
   Classes: .wixy-modetoggle, .wixy-modetoggle-btn(.is-active),
            .wixy-composition(.is-warn), .wixy-oil-pct
   -------------------------------------------------------------------------- */
.wixy-modetoggle{
  display: inline-flex;
  gap: 0;
  padding: 3px;
  background: var(--wixy-mist);
  border: 1px solid var(--wixy-line);
  border-radius: 999px;
  margin-bottom: 14px;
}
.wixy-modetoggle-btn{
  appearance: none;
  border: none;
  background: transparent;
  color: var(--wixy-ink-soft);
  font-family: var(--wixy-font-body);
  font-size: .88rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.wixy-modetoggle-btn:hover{
  color: var(--wixy-green-deep);
}
.wixy-modetoggle-btn.is-active{
  background: var(--wixy-paper);
  color: var(--wixy-green-deep);
  box-shadow: var(--wixy-shadow);
}
.wixy-modetoggle-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--wixy-focus);
}

/* live composition total line (Composition: NN%) */
.wixy-composition{
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--wixy-green-deep);
  background: var(--wixy-paper);
  border: 1px solid var(--wixy-line);
  border-left: 4px solid var(--wixy-green-contrast);
  border-radius: var(--wixy-radius-sm);
  padding: 10px 14px;
  margin-top: 12px;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.wixy-composition.is-warn{
  color: var(--wixy-amber);
  border-left-color: var(--wixy-amber);
  background: var(--wixy-mist);
}

/* per-oil derived percentage shown beside a weight (or its own % input wrapper) */
.wixy-oil-pct{
  flex: 0 1 96px;
  min-width: 72px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wixy-oil-pct .wixy-help,
.wixy-oil-pct small{
  font-size: .8rem;
  font-weight: 600;
  color: var(--wixy-ink-soft);
  white-space: nowrap;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Feature 2: searchable, grouped oil picker (Wixy.combo)
   Classes: .wixy-combo, .wixy-combo-input, .wixy-combo-pop,
            .wixy-combo-group, .wixy-combo-group-label,
            .wixy-combo-opt(.is-active/.is-selected), .wixy-combo-empty
   -------------------------------------------------------------------------- */
.wixy-combo{
  position: relative;
  width: 100%;
}
.wixy-combo-input{
  width: 100%;
  font-family: var(--wixy-font-body);
  font-size: 1rem;
  font-weight: 300;
  color: var(--wixy-ink);
  background: var(--wixy-paper);
  border: 1px solid var(--wixy-line-strong);
  border-radius: var(--wixy-radius-sm);
  padding: 11px 34px 11px 12px;
  cursor: text;
  /* same chevron as native selects, for visual parity */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23527C70' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wixy-combo-input::placeholder{ color: #9a9a9a; }
.wixy-combo-input:hover{ border-color: var(--wixy-sage); }
.wixy-combo-input:focus{
  outline: none;
  border-color: var(--wixy-sage);
  box-shadow: 0 0 0 3px var(--wixy-focus);
}
.wixy-combo-input[aria-invalid="true"]{ border-color: var(--wixy-error); }

/* popup listbox */
.wixy-combo-pop{
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--wixy-paper);
  border: 1px solid var(--wixy-line);
  border-radius: var(--wixy-radius-sm);
  box-shadow: var(--wixy-shadow);
  padding: 4px;
}
.wixy-combo-pop[hidden],
.wixy-combo-pop.is-hidden{ display: none; }

/* group of options (e.g. "Wixy favourites", "Hard oils & butters") */
.wixy-combo-group{ padding: 2px 0; }
.wixy-combo-group + .wixy-combo-group{
  border-top: 1px solid var(--wixy-line);
  margin-top: 2px;
  padding-top: 4px;
}
.wixy-combo-group-label{
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wixy-sage-dark);
  padding: 6px 10px 4px;
}

/* a single option row */
.wixy-combo-opt{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  font-weight: 400;
  color: var(--wixy-ink);
  padding: 9px 10px;
  border-radius: var(--wixy-radius-sm);
  cursor: pointer;
  scroll-margin: 4px;
}
.wixy-combo-opt:hover{ background: var(--wixy-mist); }
.wixy-combo-opt.is-active{
  background: var(--wixy-sage);
  color: var(--wixy-paper);
}
.wixy-combo-opt.is-selected{
  font-weight: 600;
  color: var(--wixy-green-deep);
}
.wixy-combo-opt.is-selected::after{
  content: "";
  margin-left: auto;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23144935' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 7.5 5.5 11 12 3.5'/%3E%3C/svg%3E");
}
/* when active AND selected, keep the tick legible on the sage highlight */
.wixy-combo-opt.is-active.is-selected{ color: var(--wixy-paper); }
.wixy-combo-opt.is-active.is-selected::after{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 7.5 5.5 11 12 3.5'/%3E%3C/svg%3E");
}

/* empty / no-results state */
.wixy-combo-empty{
  font-size: .9rem;
  font-weight: 300;
  color: var(--wixy-ink-soft);
  padding: 14px 12px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Feature 3: quality target band + plain-language reading
   Classes: .wixy-quality-band, .wixy-quality-reading
   (existing .wixy-quality* rules above stay in force)
   -------------------------------------------------------------------------- */
/* shaded target range painted onto the existing .wixy-quality-bar track.
   The JS positions it with inline left/width; the fill sits above it. */
.wixy-quality-band{
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  background: rgba(82,124,112,.22);          /* sage tint, inside palette */
  border-left: 1px solid rgba(63,99,87,.5);
  border-right: 1px solid rgba(63,99,87,.5);
  pointer-events: none;
}
/* keep the value fill drawn over the band */
.wixy-quality-fill{ z-index: 2; }

/* plain-language summary line under the bars */
.wixy-quality-reading{
  font-size: .95rem;
  font-weight: 400;
  color: var(--wixy-ink);
  background: var(--wixy-paper);
  border: 1px solid var(--wixy-line);
  border-left: 4px solid var(--wixy-sage);
  border-radius: var(--wixy-radius-sm);
  padding: 12px 14px;
  margin-top: 4px;
  line-height: 1.45;
}
.wixy-quality-reading strong{ color: var(--wixy-green-deep); }

/* --------------------------------------------------------------------------
   Feature 4: starter recipes / presets
   Classes: .wixy-presets, .wixy-preset-btn
   -------------------------------------------------------------------------- */
.wixy-presets{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.wixy-preset-btn{
  appearance: none;
  font-family: var(--wixy-font-body);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--wixy-sage-dark);
  background: var(--wixy-paper);
  border: 1px solid var(--wixy-line-strong);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.wixy-preset-btn:hover{
  background: var(--wixy-mist);
  border-color: var(--wixy-sage);
  color: var(--wixy-green-deep);
}
.wixy-preset-btn.is-active{
  background: var(--wixy-sage);
  border-color: var(--wixy-sage);
  color: var(--wixy-paper);
}
.wixy-preset-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--wixy-focus);
}

/* --------------------------------------------------------------------------
   Feature 6: cross-tab hand-off prompt bar
   Classes: .wixy-handoff, .wixy-handoff-btn
   -------------------------------------------------------------------------- */
.wixy-handoff{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-size: .92rem;
  font-weight: 400;
  color: var(--wixy-green-deep);
  background: var(--wixy-mist);
  border: 1px solid var(--wixy-line);
  border-left: 4px solid var(--wixy-sage);
  border-radius: var(--wixy-radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.wixy-handoff:empty{ display: none; }
.wixy-handoff-text{ flex: 1 1 auto; min-width: 0; }
.wixy-handoff-text strong{ font-weight: 600; }
.wixy-handoff-btn{
  appearance: none;
  flex: 0 0 auto;
  font-family: var(--wixy-font-body);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--wixy-paper);
  background: var(--wixy-sage);
  border: 1px solid var(--wixy-sage);
  border-radius: var(--wixy-radius-sm);
  padding: 9px 16px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.wixy-handoff-btn:hover{
  background: var(--wixy-sage-dark);
  border-color: var(--wixy-sage-dark);
}
.wixy-handoff-btn:active{ transform: translateY(1px); }
.wixy-handoff-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--wixy-focus);
}
/* a quieter, secondary handoff action (e.g. dismiss) */
.wixy-handoff-btn--ghost{
  color: var(--wixy-sage-dark);
  background: transparent;
  border-color: var(--wixy-line-strong);
}
.wixy-handoff-btn--ghost:hover{
  background: var(--wixy-paper);
  border-color: var(--wixy-sage);
  color: var(--wixy-green-deep);
}

/* --------------------------------------------------------------------------
   Feature 5: printable / saveable branded recipe card
   Classes: .wixy-recipe-card, .wixy-print-only, .wixy-no-print
   The card lives in a hidden print container in normal flow; @media print
   below reveals it and hides the rest.
   -------------------------------------------------------------------------- */
/* hidden on screen by default; shown only when printing */
.wixy-print-only{ display: none; }

.wixy-recipe-card{
  font-family: var(--wixy-font-body);
  color: var(--wixy-ink);
  background: var(--wixy-paper);
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 32px;
  line-height: 1.5;
}
.wixy-recipe-card h1,
.wixy-recipe-card h2,
.wixy-recipe-card h3{
  font-family: var(--wixy-font-head);
  font-weight: 700;
  color: var(--wixy-green-deep);
  margin: 0;
}
.wixy-recipe-head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--wixy-green-deep);
}
.wixy-recipe-brand{
  font-family: var(--wixy-font-head);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--wixy-green-deep);
  flex: 0 0 100%;
}
.wixy-recipe-title{ font-size: 1.25rem; margin-bottom: 0; }
.wixy-recipe-date{
  font-size: .85rem;
  font-weight: 300;
  color: var(--wixy-ink-soft);
  margin-left: auto;
}

.wixy-recipe-section{ margin-bottom: 18px; }
.wixy-recipe-section > .wixy-recipe-h{
  font-size: 1rem;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--wixy-line);
}

.wixy-recipe-card table{
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.wixy-recipe-card th,
.wixy-recipe-card td{
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid var(--wixy-line);
  vertical-align: top;
}
.wixy-recipe-card th{
  font-weight: 600;
  color: var(--wixy-ink-soft);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.wixy-recipe-card td.wixy-recipe-num,
.wixy-recipe-card th.wixy-recipe-num{ text-align: right; white-space: nowrap; }
.wixy-recipe-card tfoot td{
  font-weight: 700;
  color: var(--wixy-green-deep);
  border-top: 2px solid var(--wixy-line-strong);
  border-bottom: none;
}

/* compact key/value list for the lye + water output and options */
.wixy-recipe-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 18px;
  margin: 0;
  font-size: .92rem;
}
.wixy-recipe-line{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--wixy-line);
}
.wixy-recipe-key{ color: var(--wixy-ink-soft); }
.wixy-recipe-value{
  margin: 0;
  font-weight: 600;
  color: var(--wixy-green-deep);
  white-space: nowrap;
}

.wixy-recipe-reading{
  font-size: .95rem;
  border-left: 3px solid var(--wixy-sage);
  padding: 6px 0 6px 12px;
  margin-top: 4px;
}
.wixy-recipe-empty{
  font-size: .92rem;
  color: var(--wixy-ink-soft);
}
.wixy-recipe-note{
  font-size: .9rem;
  color: var(--wixy-ink-soft);
  margin-top: 4px;
}
.wixy-recipe-footer{
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--wixy-line);
  font-size: .82rem;
  color: var(--wixy-ink-soft);
  text-align: center;
}
.wixy-recipe-safety{ margin: 0 0 6px; }
.wixy-recipe-made{
  margin: 0;
  font-weight: 600;
  color: var(--wixy-green-deep);
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .wixy-panel.is-active{ animation: none; }
  .wixy-quality-fill,
  .wixy-input,
  .wixy-select,
  .wixy-btn,
  .wixy-btn-ghost,
  .wixy-tab,
  .wixy-modetoggle-btn,
  .wixy-composition,
  .wixy-combo-input,
  .wixy-preset-btn,
  .wixy-handoff-btn{ transition: none; }
}

/* --------------------------------------------------------------------------
   Responsive tweaks for the new UI (down to ~360px)
   -------------------------------------------------------------------------- */
@media (max-width: 600px){
  .wixy-modetoggle{ width: 100%; }
  .wixy-modetoggle-btn{ flex: 1 1 auto; text-align: center; }
  .wixy-handoff{ align-items: stretch; }
  .wixy-handoff-btn{ width: 100%; }
  .wixy-recipe-list{ grid-template-columns: 1fr; }
}
@media (max-width: 380px){
  .wixy-row .wixy-oil-pct{ flex: 1 1 100%; }
  .wixy-preset-btn{ flex: 1 1 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   Feature 5: PRINT - show ONLY the recipe card, hide the whole app chrome.
   -------------------------------------------------------------------------- */
@media print{
  /* neutralize the page so only the card prints */
  body{
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* hide everything by default... */
  body * { visibility: hidden !important; }
  /* ...then reveal the recipe card and its subtree */
  .wixy-recipe-card,
  .wixy-recipe-card *{ visibility: visible !important; }

  /* surface the (normally hidden) print container + card to the top-left */
  .wixy-print-only{ display: block !important; }
  .wixy-recipe-card{
    display: block !important;
    position: absolute !important;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 16px 18px !important;
    box-shadow: none !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* explicit belt-and-braces: never print app chrome or any no-print marker */
  .wixy-no-print,
  .wixy-header,
  .wixy-tabs,
  .wixy-units,
  .wixy-handoff,
  .wixy-modetoggle,
  .wixy-presets,
  .wixy-lead,
  .wixy-info,
  .wixy-buy-wrap,
  .wixy-footer{ display: none !important; }

  /* avoid awkward breaks inside the recipe sections */
  .wixy-recipe-section,
  .wixy-recipe-card tr{ page-break-inside: avoid; }
  .wixy-recipe-head{ page-break-after: avoid; }

  a[href]:after{ content: ""; }   /* no URL litter in the printout */
}

/* ============================================================================
   Features 7-12 UI: supplies funnel, lead magnet, fragrance note, inline cues,
   tooltips, metric/imperial toggle. Colors via the --wixy-* tokens only.
   ============================================================================ */

/* Feature 12: metric/imperial toggle (sits just under the tabs) */
.wixy-units{
  display:flex; align-items:center; gap:10px;
  margin:0 0 14px; flex-wrap:wrap;
}
.wixy-units-label{ font-size:.85rem; color:var(--wixy-ink-soft); font-weight:600; }
.wixy-units-group{
  display:inline-flex; border:1px solid var(--wixy-line-strong);
  border-radius:var(--wixy-radius-sm); overflow:hidden;
}
.wixy-units-btn{
  appearance:none; border:0; background:var(--wixy-paper); color:var(--wixy-ink-soft);
  font:inherit; font-size:.85rem; padding:6px 12px; cursor:pointer;
}
.wixy-units-btn + .wixy-units-btn{ border-left:1px solid var(--wixy-line-strong); }
.wixy-units-btn.is-active{ background:var(--wixy-sage); color:#fff; }
.wixy-units-btn:focus-visible{ outline:2px solid var(--wixy-focus); outline-offset:-2px; }

/* Feature 7: buy-at-Wixy link under each oil row */
.wixy-buy-wrap{ margin-top:4px; }
.wixy-buy{
  display:inline-block; font-size:.8rem; color:var(--wixy-sage);
  text-decoration:none; border-bottom:1px dotted var(--wixy-sage);
}
.wixy-buy:hover, .wixy-buy:focus{ color:var(--wixy-sage-dark); border-bottom-style:solid; }

/* Feature 11: "what is this?" info tooltip */
.wixy-info{ position:relative; display:inline-block; margin-left:6px; vertical-align:middle; }
.wixy-info-btn{
  appearance:none; border:1px solid var(--wixy-line-strong); background:var(--wixy-mist);
  color:var(--wixy-ink-soft); width:16px; height:16px; line-height:14px; padding:0;
  border-radius:50%; font-size:.7rem; font-weight:700; cursor:pointer; text-align:center;
}
.wixy-info-btn:focus-visible{ outline:2px solid var(--wixy-focus); outline-offset:1px; }
.wixy-info-tip{
  position:absolute; z-index:20; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
  width:230px; max-width:60vw; background:var(--wixy-green-deep); color:#fff;
  font-size:.78rem; line-height:1.35; font-weight:400; padding:8px 10px;
  border-radius:var(--wixy-radius-sm); box-shadow:var(--wixy-shadow);
  opacity:0; visibility:hidden; transition:opacity .12s ease;
}
.wixy-info.is-open .wixy-info-tip{ opacity:1; visibility:visible; }
.wixy-info-tip:after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--wixy-green-deep);
}

/* Feature 10: inline cues placed next to the field that caused them */
.wixy-cue{
  font-size:.8rem; line-height:1.35; margin:4px 0 0; padding:6px 10px;
  border-radius:var(--wixy-radius-sm); border-left:3px solid var(--wixy-amber);
  background:rgba(201,136,31,.08); color:var(--wixy-ink);
}
.wixy-cue + .wixy-cue{ margin-top:6px; }
.wixy-cue--info{ border-left-color:var(--wixy-sage); background:rgba(82,124,112,.08); }

/* Feature 8: email lead-magnet form */
.wixy-lead{
  margin-top:12px; padding:14px; background:var(--wixy-mist);
  border:1px solid var(--wixy-line); border-radius:var(--wixy-radius-sm);
  display:flex; flex-direction:column; gap:8px;
}
.wixy-consent{
  display:flex; align-items:flex-start; gap:8px;
  font-size:.85rem; color:var(--wixy-ink-soft); cursor:pointer;
}
.wixy-consent input{ margin-top:3px; flex:0 0 auto; }

/* Feature 7 inside the printed recipe card */
.wixy-recipe-buy{ font-size:.8rem; color:var(--wixy-sage); text-decoration:none; }