/* ==========================================================================
   Baseline Recipes UI
   - Recipe card layout (grid + print button)
   - Recipe control contract: Title -> Batch Multiplier -> Measurement Type
     -> Scale By Ingredient -> any recipe-specific controls
   - Optional “open one recipe” mode with side navigation
   --------------------------------------------------------------------------
   Designed to be dropped into any Baseline page that already defines:
   --ink, --muted, --accent-2, --accent-soft, --ring, --shadow, --homebar-h
   ========================================================================== */

/* ---------------------------
   Recipe cards / grid
--------------------------- */

.recipes{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 560px));
  justify-content: start;
}

.recipe.card{
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  overflow: visible !important; /* allow select dropdowns to expand */
  min-width:0; /* allow grid children to shrink without overflow */

    width: 100%;
}

/* In single-recipe mode, the active card should use full width */
#recipes.recipe-open-mode .recipe.card.active{
  max-width: none;
  justify-self: stretch;
}

/* Recipe titles act as open controls in overview mode */
.recipe.card h3{ cursor: pointer; }

/* Title row (title + favourite star) */
.recipe-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.recipe-title-row > h2,
.recipe-title-row > h3{
  margin: 0;
  flex: 0 1 auto;
}

.recipe-title-row .recipe-title-row .fav-btn:hover{ background: rgba(255,255,255,.10); }



/* Small helper text used across recipes */
.note{
  font-size:1em;
  line-height:1.55;
  color:var(--muted);
}

/* “Print this recipe” button (Baseline Natural Skincare baseline) */
.print-btn{
  float:right;
  margin-left: 10px;
  padding:8px 12px;
  border-radius: 999px;
  border:1px solid var(--showall-border);
  background: var(--showall-bg);
  color: var(--accent-2);
  font-weight: 850;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}
.print-btn:hover{ filter: brightness(1.03); }

/* Back button (visible in single-recipe view) */
.back-btn{
  float:left;
  margin-right: 10px;
  padding:8px 12px;
  border-radius: 999px;
  border:1px solid var(--showall-border);
  background: var(--showall-bg);
  color: var(--accent-2);
  font-weight: 850;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
  display:none;
}
.back-btn:hover{ filter: brightness(1.03); }

/* Only show the back button when a single recipe is focused */
#recipes.recipe-open-mode .recipe-page.active .back-btn{ display:inline-block; }

/* Top action row (Back + Print) */
.recipe-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 8px 0;
  clear:both;
  flex-wrap:wrap;
}
.recipe-actions-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

/* Mobile: prevent action buttons from colliding/overlapping.
   Stack the actions when horizontal room is limited. */
@media (max-width: 720px){
  .recipe-actions{
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .recipe-actions-right{
    width: 100%;
    justify-content: flex-start;
  }
  .recipe-actions .back-btn,
  .recipe-actions .print-btn{
    width: 100%;
  }

  /* Fail-safe: if JS fails to wrap buttons into .recipe-actions,
     the legacy floated buttons can overlap on narrow screens.
     Force a stacked layout directly on the buttons as well. */
  #recipes.recipe-open-mode .recipe-page.active .back-btn,
  #recipes.recipe-open-mode .recipe-page.active .print-btn{
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
  }
  #recipes.recipe-open-mode .recipe-page.active .print-btn{ margin-bottom: 0 !important; }
}

/* Remove legacy floats; action-row controls layout now */
.back-btn,
.print-btn{
  float:none;
}
.recipe-actions .back-btn,
.recipe-actions .print-btn{
  margin:0;
}

/* ---------------------------
   Multiplier + measurement UI
--------------------------- */

.multiplier{
  overflow: visible;
  clear:both;
  display:flex;
  flex-wrap:wrap;
  gap:10px 10px;
  align-items:center;
  margin:10px 0 12px 0;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--border);
  background: var(--accent-soft);
  box-shadow:0 14px 28px -24px rgba(35,23,19,0.28);
}

/* Labels stay compact but readable */
.multiplier label,
.multiplier .label{
  font-size:16px;
  font-weight:800;
  color:var(--ink);
  letter-spacing:0.2px;
  margin-right:2px;
}

.multiplier select,
.multiplier input{
  appearance:none;
  -webkit-appearance:none;
  border-radius:14px;
  border:1px solid rgba(122,74,58,0.14);
  outline:none;
  background:rgba(255,255,255,0.20);
  color:var(--ink);
}

.multiplier select{
  padding:9px 34px 9px 10px;
  min-width: 140px;
  font-weight:800;
  flex:0 1 auto;
  max-width:100%;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(35,23,19,0.55) 50%),
    linear-gradient(135deg, rgba(35,23,19,0.55) 50%, transparent 50%),
    linear-gradient(to right, rgba(35,23,19,0.10), rgba(35,23,19,0.10));
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px),
    calc(100% - 34px) 50%;
  background-size: 6px 6px, 6px 6px, 1px 18px;
  background-repeat:no-repeat;
}

.multiplier input{
  width:110px;
  padding:9px 10px;
  font-weight:850;
}

/* Focus rings are consistent with the rest of the site */
.multiplier select:focus,
.multiplier input:focus{
  box-shadow:0 0 0 4px var(--ring);
  border-color: var(--showall-border);
}

/* Buttons inside multiplier */
.multiplier button{
  padding:9px 11px;
  border-radius:999px;
  font-weight:850;
  cursor:pointer;
  font-size:16px;
  border:1px solid rgba(122,74,58,0.18);
  background:rgba(255,255,255,0.22);
  color:var(--ink);
}
.multiplier button:hover{ filter: brightness(1.03); }
.multiplier button.secondary,
.multiplier button.reset{
  background: var(--filter-bg);
  border-color: var(--border);
}

/* If you keep the Food Management “tip” span, this styles it nicely */
.multiplier .mini-note{
  font-size:16px;
  color:var(--muted);
  margin-left:auto;
  white-space:nowrap;
}

/* Keep the control row “single-line” where there is room, but allow wrapping on small screens */
@media (min-width: 820px){
  .multiplier{
  overflow: visible; flex-wrap:nowrap; }
  .multiplier .mini-note{ min-width:max-content; }
}

@media (max-width: 819px){
  .multiplier .mini-note{ width:100%; white-space:normal; margin-left:0; }
}

/* ---------------------------
   Thickness selection (recipe-level)
   - Used by recipes that swap thickness values (e.g., gels / sauces)
   - Intentionally styled to match the Multiplier / Measurement control bar
--------------------------- */

/* ---------------------------
   Recipe “open one at a time” mode (optional)
   - Uses: #recipes.recipe-open-mode
--------------------------- */

/* Default: show cards grid */
.recipe-page{ display:block; }
#recipes-landing{ display:block; }

/* Ensure the overview and the grid have consistent separation */
#recipes #recipes-landing{ margin-bottom: var(--space-4, 18px); }

/* When open-mode is enabled, hide the landing and show one recipe at a time */
#recipes.recipe-open-mode .recipe-page{ display:none; }
#recipes.recipe-open-mode #recipes-landing{ display:none !important; }

/* In open-mode, ensure the active recipe uses the full available width.
   Without this, the default 2-column .recipes grid can leave an empty right column.
*/
#recipes.recipe-open-mode .recipes{
  display:grid;
  grid-template-columns: 1fr;
}

/* In open-mode, allow the active recipe card to use full width */
#recipes.recipe-open-mode .recipe-page.active{
  max-width: none;
  justify-self: stretch;
}


/* Focused mode: no side list, single column, and a top “Back to Recipe Overview” action */
.recipe-top-bar{
  display:none;
  align-items:center;
  gap:10px;
  margin: 0 0 var(--space-3, 14px) 0;
}

#recipes.recipe-open-mode.recipe-focus .recipe-top-bar{ display:flex; }

#recipes.recipe-focus .side-recipe-nav{ display:none !important; }
#recipes.recipe-focus .recipe-layout{ display:block; }

/* Layout wrapper */
.recipe-layout{ display:block; }
#recipes.recipe-open-mode .recipe-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items:start;
}

/* When using the focused view, keep it single-column even in open mode */
#recipes.recipe-open-mode.recipe-focus .recipe-layout{
  display:block;
}

/* Side navigation panel */
.side-recipe-nav{
  display:none;
  position:sticky;
  top: calc(var(--homebar-h) + 18px);
  align-self:start;
  padding: 14px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(122,74,58,0.14);
  border-radius: 18px;
  box-shadow: 0 16px 34px -26px rgba(35,23,19,0.28);
}
#recipes.recipe-open-mode .side-recipe-nav{ display:block; }

.side-recipe-nav h4{ margin: 12px 0 10px 0; }
.side-recipe-nav ul{ margin: 0; padding-left: 18px; }
.side-recipe-nav li{ margin: 8px 0; }
.side-recipe-nav a{ font-weight: 750; }

.side-recipe-nav .back-link{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(122,74,58,0.16);
  background: rgba(255,255,255,0.24);
  color: var(--accent-2);
  text-decoration:none;
}

@media (max-width: 900px){
  #recipes.recipe-open-mode .recipe-layout{ grid-template-columns: 1fr; }
  .side-recipe-nav{ position:relative; top:auto; }
}

/* --------------------------------------------------------------------------
   Overrides requested (sitewide consistency)
   -------------------------------------------------------------------------- */

/* Remove the “Tip: 0.5 = …” helper everywhere (text removed from HTML, but keep hard hide) */
.multiplier .mini-note{ display:none !important; }

/* Ensure the control bar fills the available width and keeps intended order */
.multiplier{
  overflow: visible; width:100%; justify-content:flex-start; }

/* Thickness control bar should match the multiplier bar and not look “thick” */
/* Units: ensure readable spacing when a quantity is split into spans */
.thickness-unit{ margin-left:0.22em; }

/* Small screens: keep recipe controls usable in cards */
@media (max-width: 520px){
  .multiplier{
  overflow: visible; gap:8px; }
  .multiplier select,
  .multiplier input{
    flex:1 1 100%;
    width:100%;
    min-width:0;
  }
  .multiplier .mini-note{
    flex:1 1 100%;
    margin-left:0;
    white-space:normal;
  }
}

/* Print: recipe-focused output (prints the current recipe card, no popups) */
.print-summary{ display:none; }

@page { size: A4; margin: 12mm; }


/* ---------------------------
   Scale by ingredient (collapsible)
   --------------------------- */
.scale-block{
  margin: 10px 0 0;
}

.scale-toggle{
  border:1px solid rgba(35,23,19,0.18);
  background: rgba(255,255,255,0.22);
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 16px;
  cursor: pointer;
}

.scale-toggle:hover{
  background: rgba(255,255,255,0.30);
}

.scale-tools{
  margin-top: 10px;
}

/* Toggle behaviour: keep panel closed unless explicitly opened */
.scale-block:not(.is-open) .scale-tools{ display:none !important; }
.scale-block.is-open .scale-tools{ display:flex; }

.scale-tools select,
.scale-tools input{
  flex: 0 1 auto;
  min-width: 140px;
}

.scale-amount-input{
  /* Free entry field (no spinners/steppers): quantity may be grams/ml/etc. */
  flex: 1 1 14ch;
  min-width: 14ch; /* fits 'Enter Quantity' comfortably */
  max-width: 100%;
  -moz-appearance: textfield;
  appearance: textfield;
}
.scale-amount-input::-webkit-outer-spin-button,
.scale-amount-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}


.scale-apply{
  padding: 10px 14px;
  border-radius: 14px;
}

.scale-msg{
  margin-top: 8px;
  white-space: pre-line;
}

/* Scaling tools are available on every recipe card (overview + single view). */
.scale-block{ display: block; }

@media print{
  /* Avoid any printed scrollbars (common when a sticky layout sets overflow) */
  html, body{ height:auto !important; overflow:visible !important; }

  body::before{ content:none !important; display:none !important; }

  /* Hide global chrome */
  .homebar, .system-menu, .bl-homebar, .bl-system-menu, .bl-system-wrap, .hero, .tabs, .footer,
  .section:not(#recipes),
  #recipes-landing,
  #side-nav,
  #recipeTopBar,
  .back-fab, .top-fab{
    display:none !important;
  }

  /* Hide recipe interaction chrome */
  .recipe-actions,
  .back-btn,
  .print-btn,
  .back-btn,
  .recipe-actions,
  .multiplier,
  .scale-block,
  a.info-link,
  .ingredient-recipe-link,
  .ingredient-filter{
    display:none !important;
  }

  /* Utility: allow JS to mark sections as non-essential for print */
  .print-hide{ display:none !important; }

  /* Only print a targeted recipe when printing is invoked from the site */
  /* Remove section-level headings and wrapper chrome (print should be recipe-only) */
  body.printing-recipe #recipes > .grid > .card{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; margin:0 !important; }
  body.printing-recipe #recipes > .grid > .card > h2{ display:none !important; }
  body.printing-recipe #recipes > .grid{ gap:0 !important; }

  body.printing-recipe #recipes .recipe-page{ display:none !important; }
  body.printing-recipe #recipes .recipe-page.print-target{ display:block !important; }

  body.printing-recipe{ background:#fff !important; }

  #recipes{ padding:0 !important; }

  /* Print as a clean recipe sheet (no card chrome, gradients, borders) */
  #recipes .recipe.card,
  #recipes .recipe.card::before,
  #recipes .recipe.card::after,
  #recipes .recipe.card *{
    box-shadow:none !important;
  }

  #recipes .recipe.card{
    border:none !important;
    background:transparent !important;
    border-radius:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:visible !important;
    page-break-inside:avoid;
  }

  #recipes .recipe.card::before,
  #recipes .recipe.card::after{
    content:none !important;
    display:none !important;
  }

  #recipes .recipe.card h3{
    font-size:24px;
    line-height:1.12;
    margin:0 0 6px 0;
  }

  #recipes .recipe.card h4{
    margin:14px 0 6px 0;
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:0.07em;
    color:#333;
  }

  .print-summary{
    display:block !important;
    margin:0 0 12px 0;
    padding:0 0 10px 0;
    border-bottom:1px dotted rgba(0,0,0,0.28);
    font-size:16px;
    color:#222;
  }

  /* Ingredients: light, low-ink separators (no heavy solid rules)
     (JS tags the ingredients UL as .ingredients-list)
  */
  body.printing-recipe #recipes .recipe-page.print-target .ingredients-list{ margin-left:18px; }
  body.printing-recipe #recipes .recipe-page.print-target .ingredients-list > li{
    padding:6px 0;
    margin:0;
    border-bottom:1px dotted rgba(0,0,0,0.22);
    break-inside:avoid;
  }
  body.printing-recipe #recipes .recipe-page.print-target .ingredients-list > li:last-child{ border-bottom:none; }

  /* Ensure nothing constrains height during print */
  body.printing-recipe #recipes .recipe-page.print-target,
  body.printing-recipe #recipes .recipe-page.print-target *{
    max-height:none !important;
    overflow:visible !important;
  }

  a{ color:inherit !important; text-decoration:none !important; }
}

/* --------------------------------------------------------------------------
   Recipe overview control bar
   - Each control on its own line (Batch / Measurement / Thickness)
   - Actions column on the right (Apply above Reset)
   - Applies only in Recipe Overview (not in recipe-open-mode)
   -------------------------------------------------------------------------- */

#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls{
  display:grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 12px;
  row-gap: 10px;
  align-items:center;
}

#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls .label{
  white-space:nowrap;
}

#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls input,
#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls select{
  width:100%;
  min-width:0;
  max-width:100%;
}

/* Row mapping (works whether Thickness exists or not) */
#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls .batch-label{ grid-column:1; grid-row:1; }
#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls .batch-input{ grid-column:2; grid-row:1; }

#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls .meas-label{ grid-column:1; grid-row:2; }
#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls .measure-select{ grid-column:2; grid-row:2; }

#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls .thickness-label{ grid-column:1; grid-row:3; }
#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls .thickness-select{ grid-column:2; grid-row:3; }

#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls button.apply{
  grid-column:3;
  grid-row:1;
  justify-self:end;
}
#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls button.reset{
  grid-column:3;
  grid-row:2;
  justify-self:end;
}

/* If a recipe has Thickness, keep actions aligned to the top (not vertically centered across 3 rows) */
#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls button.apply,
#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls button.reset{
  align-self:start;
}

/* --------------------------------------------------------------------------
   Cleanup / hard overrides (sitewide)
   - Remove deprecated top back bar (caused duplicate back controls on mobile)
   - Ensure action buttons never rely on floats
   -------------------------------------------------------------------------- */

.recipe-top-bar{ display:none !important; }
#recipes.recipe-open-mode.recipe-focus .recipe-top-bar{ display:none !important; }

.print-btn, .back-btn{ float:none !important; }



/* Inline method amount annotations */
.amt-inline{ color: var(--muted); font-size: .98em; }


/* Method: injected scaled amounts (clean, readable) */
.method-amt-inject{
  margin-top: 8px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap: 8px;
}
.method-amt-label{
  color: var(--muted);
  font-weight: 900;
}
.method-amt{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--ink);
  font-weight: 850;
  font-size: 0.95em;
}


/* Ingredient sub-category headings (no theme change; purely structural) */
.recipe-page ul li.ing-subhead{
  list-style: none;
  margin: 10px 0 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.12);
  opacity: 0.9;
}
.recipe-page ul li.ing-subhead strong{
  letter-spacing: 0.5px;
}


@media print{
  /* The food page scrolls inside .bl-scroll on screen; unwrap it for print so the recipe can paginate normally. */
  .bl-scroll{
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
    transform: none !important;
  }

  body.printing-recipe,
  body.printing-recipe main,
  body.printing-recipe .wrap,
  body.printing-recipe #recipes,
  body.printing-recipe #recipes > .grid,
  body.printing-recipe #recipes > .grid > .card,
  body.printing-recipe .recipe-layout,
  body.printing-recipe .recipe-main,
  body.printing-recipe .recipes{
    display: block !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.printing-recipe #recipes .recipe-page.print-target{
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  body.printing-recipe #recipes .recipe-page.print-target *{
    max-height: none !important;
    overflow: visible !important;
  }
}


/* Wrapped number steppers must inherit the input slot cleanly */
.multiplier .bl-number{
  width:148px;
  min-width:0;
  max-width:100%;
}
#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls .bl-number.batch-input{
  grid-column:2;
  grid-row:1;
  width:100%;
}
#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls .bl-number.batch-input input{
  width:100%;
}


/* --------------------------------------------------------------------------
   Mobile recipe control layout
   - Keep Measurement Type on one line
   - Place each label above its field in focused recipe view
   -------------------------------------------------------------------------- */
@media (max-width: 900px){
  #recipes.recipe-open-mode .recipe-controls,
  #recipes.recipe-detail-open .recipe-controls{
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items:start;
  }

  #recipes.recipe-open-mode .recipe-controls .label,
  #recipes.recipe-detail-open .recipe-controls .label{
    display:block;
    width:100%;
    margin:0 0 -2px 0;
    white-space:nowrap;
  }

  #recipes.recipe-open-mode .recipe-controls .batch-input,
  #recipes.recipe-open-mode .recipe-controls .measure-select,
  #recipes.recipe-open-mode .recipe-controls .thickness-select,
  #recipes.recipe-detail-open .recipe-controls .batch-input,
  #recipes.recipe-detail-open .recipe-controls .measure-select,
  #recipes.recipe-detail-open .recipe-controls .thickness-select{
    width:100%;
    min-width:0;
  }

  #recipes.recipe-open-mode .recipe-controls .bl-number,
  #recipes.recipe-detail-open .recipe-controls .bl-number{
    width:100%;
  }

  #recipes.recipe-open-mode .recipe-controls .apply,
  #recipes.recipe-detail-open .recipe-controls .apply,
  #recipes.recipe-open-mode .recipe-controls .reset,
  #recipes.recipe-detail-open .recipe-controls .reset{
    width:100%;
  }

  #recipes.recipe-open-mode .scale-tools,
  #recipes.recipe-detail-open .scale-tools{
    display:grid !important;
    grid-template-columns: 1fr;
    gap:10px;
    align-items:start;
  }

  #recipes.recipe-open-mode .scale-tools .label,
  #recipes.recipe-detail-open .scale-tools .label{
    white-space:nowrap;
    margin:0 0 -2px 0;
  }
}

/* Desktop: Apply button removed, keep Reset visible */
@media (min-width: 901px){
  .recipe-controls .apply{ display:none !important; }
  #recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls button.reset{ grid-row:1 !important; }
}


/* Batch input: keep number field and arrows compact and adjacent */
.multiplier .bl-number.batch-input,
.multiplier .batch-input.bl-number,
#recipes .recipe-controls .bl-number.batch-input{
  width: 138px !important;
  max-width: 138px !important;
  min-width: 138px !important;
  justify-self: start !important;
}
#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls{
  grid-template-columns: auto 180px auto !important;
}
#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls .batch-input,
#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls .measure-select,
#recipes:not(.recipe-open-mode) .recipes .multiplier.recipe-controls .thickness-select{
  justify-self: start;
}
.multiplier .bl-number{
  width: 138px;
  max-width: 138px;
}


/* --------------------------------------------------------------------------
   Exact recipe layout + slider save theming fixes
   -------------------------------------------------------------------------- */
.recipe-title-row{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  width:100% !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}
.recipe-title-row > h2,
.recipe-title-row > h3{
  margin:0 !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}
.recipe-title-row .fav-btn{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 0 0 auto !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:var(--accent-2) !important;
  flex:0 0 auto !important;
}
.recipe-title-row .fav-btn:hover,
.recipe-title-row .fav-btn:focus-visible,
.recipe-title-row .fav-btn.is-fav{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  text-decoration:none !important;
}
.scale-amount-input{
  min-width:20ch !important;
  width:20ch !important;
  flex:0 0 20ch !important;
  max-width:100% !important;
}
.slider-save-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:12px;
}
.slider-save-btn{
  appearance:none;
  border:1px solid var(--border) !important;
  background:var(--showall-bg) !important;
  color:var(--accent-2) !important;
  border-radius:999px !important;
  padding:10px 12px !important;
  font-size:16px !important;
  font-weight:850 !important;
  box-shadow:var(--shadow-soft) !important;
  cursor:pointer;
}
.slider-save-btn:hover{
  filter:brightness(1.02);
}
.slider-save-status{
  font-size:15px;
  color:var(--muted);
  min-height:1.2em;
}
.slider-save-status[data-kind="saved"]{ color:var(--accent-2); }
.slider-save-status[data-kind="error"]{ color:var(--accent); }
.slider-save-status[data-kind="notice"]{ color:var(--accent-2); }


/* --------------------------------------------------------------------------
   Final recipe control contract
   - Title/star on its own line
   - Batch Multiplier on its own line
   - Measurement Type on its own line
   - Scale By Ingredient on its own line (collapsed by default)
   -------------------------------------------------------------------------- */
.recipe-title-row{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  width:100% !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  margin:0 0 12px 0 !important;
}
.recipe-title-row > h2,
.recipe-title-row > h3{
  flex:1 1 auto !important;
  min-width:0 !important;
}
.recipe-title-row .fav-btn{
  margin-left:12px !important;
  flex:0 0 auto !important;
}

.recipe-controls{
  display:grid !important;
  grid-template-columns:auto minmax(180px, 320px) auto;
  column-gap:12px;
  row-gap:10px;
  align-items:center;
  width:100%;
  justify-content:start;
}
.recipe-controls .label{
  margin:0 !important;
  white-space:nowrap;
}
.recipe-controls input,
.recipe-controls select{
  min-width:0;
  max-width:100%;
}
.recipe-controls .batch-label{ grid-column:1; grid-row:1; }
.recipe-controls .bl-number.batch-input,
.recipe-controls .batch-input.bl-number,
.recipe-controls .batch-input{ grid-column:2; grid-row:1; }
.recipe-controls .meas-label{ grid-column:1; grid-row:2; }
.recipe-controls .measure-select{ grid-column:2; grid-row:2; }
.recipe-controls .apply{ grid-column:3; grid-row:1; justify-self:start; }
.recipe-controls .reset{ grid-column:3; grid-row:2; justify-self:start; }
.recipe-controls.has-oat-toggle:not(.has-thickness) .oat-label{ grid-column:1; grid-row:3; }
.recipe-controls.has-oat-toggle:not(.has-thickness) .oat-toggle{ grid-column:2 / span 2; grid-row:3; }
.recipe-controls.has-thickness:not(.has-oat-toggle) .thickness-label{ grid-column:1; grid-row:3; }
.recipe-controls.has-thickness:not(.has-oat-toggle) .thickness-select{ grid-column:2; grid-row:3; }
.recipe-controls.has-oat-toggle.has-thickness .oat-label{ grid-column:1; grid-row:3; }
.recipe-controls.has-oat-toggle.has-thickness .oat-toggle{ grid-column:2 / span 2; grid-row:3; }
.recipe-controls.has-oat-toggle.has-thickness .thickness-label{ grid-column:1; grid-row:4; }
.recipe-controls.has-oat-toggle.has-thickness .thickness-select{ grid-column:2; grid-row:4; }

/* Keep the batch field compact and tidy. */
.recipe-controls .bl-number.batch-input,
.recipe-controls .batch-input.bl-number,
#recipes .recipe-controls .bl-number.batch-input{
  width:138px !important;
  max-width:138px !important;
  min-width:138px !important;
  justify-self:start !important;
}

/* Scale by ingredient: no extra card/background, own line, collapsed by default. */
.scale-block{
  width:100%;
  margin:10px 0 0;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.scale-toggle{
  display:inline-flex !important;
  align-items:center;
  justify-content:flex-start;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.scale-toggle:hover,
.scale-toggle:focus,
.scale-toggle:focus-visible{
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}
.scale-tools{
  margin-top:10px;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.scale-tools > .label{ display:none !important; }
.scale-block:not(.is-open) .scale-tools{ display:none !important; }
.scale-block.is-open .scale-tools{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(90px, 110px) minmax(16ch, 1fr) auto;
  gap:10px;
  align-items:center;
}

@media (max-width: 900px){
  .recipe-title-row{
    align-items:flex-start !important;
  }
  .recipe-controls{
    grid-template-columns:1fr !important;
    gap:10px;
  }
  .recipe-controls .batch-label,
  .recipe-controls .meas-label,
  .recipe-controls .oat-label,
  .recipe-controls .thickness-label,
  .recipe-controls .bl-number.batch-input,
  .recipe-controls .batch-input.bl-number,
  .recipe-controls .batch-input,
  .recipe-controls .measure-select,
  .recipe-controls .oat-toggle,
  .recipe-controls .thickness-select,
  .recipe-controls .apply,
  .recipe-controls .reset{
    grid-column:1 !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    justify-self:stretch !important;
  }
  .recipe-controls .batch-label{ grid-row:auto !important; }
  .recipe-controls .bl-number.batch-input,
  .recipe-controls .batch-input.bl-number,
  .recipe-controls .batch-input{ grid-row:auto !important; }
  .recipe-controls .meas-label{ grid-row:auto !important; }
  .recipe-controls .measure-select{ grid-row:auto !important; }
  .recipe-controls .oat-label,
  .recipe-controls .oat-toggle,
  .recipe-controls .thickness-label,
  .recipe-controls .thickness-select,
  .recipe-controls .apply,
  .recipe-controls .reset{ grid-row:auto !important; }
  .scale-block.is-open .scale-tools{
    grid-template-columns:1fr;
  }
  .scale-apply{ width:100%; }
}


/* --------------------------------------------------------------------------
   Sitewide recipe control contract
   - line 1: title + star
   - line 2: Batch Multiplier
   - line 3: Measurement Type
   - line 4: Scale By Ingredient
   -------------------------------------------------------------------------- */
.recipe-controls{
  display:grid !important;
  grid-template-columns:auto minmax(0, 340px) auto !important;
  column-gap:12px;
  row-gap:10px;
  align-items:center;
  width:100%;
}
.recipe-controls .batch-label{ grid-column:1; grid-row:1; white-space:nowrap; }
.recipe-controls .bl-number.batch-input,
.recipe-controls .batch-input{ grid-column:2; grid-row:1; justify-self:start; }
.recipe-controls .meas-label{ grid-column:1; grid-row:2; white-space:nowrap; }
.recipe-controls .bl-select.measure-select,
.recipe-controls .measure-select{ grid-column:2; grid-row:2; justify-self:start; width:100%; max-width:340px; min-width:0; }
.recipe-controls .thickness-label{ grid-column:1; grid-row:3; white-space:nowrap; }
.recipe-controls .bl-select.thickness-select,
.recipe-controls .thickness-select{ grid-column:2; grid-row:3; justify-self:start; width:100%; max-width:340px; min-width:0; }
.recipe-controls .reset{
  grid-column:3;
  grid-row:1 / span 2;
  justify-self:start;
  align-self:start;
}
.recipe-controls-anchor,
.recipe-page .recipe-controls + .print-summary,
.recipe-page .scale-block{
  width:100%;
}
.recipe-page .recipe-controls + .print-summary{
  margin:0;
}
.scale-block{
  width:100%;
  margin:10px 0 0;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.scale-toggle{
  display:inline-flex !important;
  align-items:center;
  justify-content:flex-start;
  width:auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.scale-toggle:hover,
.scale-toggle:focus,
.scale-toggle:focus-visible{
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}
.scale-tools{
  margin-top:10px;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.scale-tools > .label{ display:none !important; }
.scale-block.is-open .scale-tools{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(90px, 110px) minmax(18ch, 1fr) auto;
  gap:10px;
  align-items:center;
}
.scale-block.is-open .bl-select.scale-ingredient-select,
.scale-block.is-open .scale-ingredient-select{ width:100%; min-width:0; }
.scale-block.is-open .bl-select.scale-unit-select,
.scale-block.is-open .scale-unit-select{ width:100%; min-width:0; }
.scale-amount-input{
  min-width:18ch !important;
  width:18ch !important;
  flex:0 0 18ch !important;
  max-width:100% !important;
}
@media (max-width: 900px){
  .recipe-controls{
    grid-template-columns:1fr !important;
  }
  .recipe-controls .batch-label,
  .recipe-controls .bl-number.batch-input,
  .recipe-controls .batch-input,
  .recipe-controls .meas-label,
  .recipe-controls .bl-select.measure-select,
  .recipe-controls .measure-select,
  .recipe-controls .thickness-label,
  .recipe-controls .bl-select.thickness-select,
  .recipe-controls .thickness-select,
  .recipe-controls .reset{
    grid-column:1 !important;
    justify-self:stretch !important;
    width:100% !important;
    max-width:none !important;
  }
  .recipe-controls .batch-label{ grid-row:auto !important; }
  .recipe-controls .bl-number.batch-input,
  .recipe-controls .batch-input{ grid-row:auto !important; }
  .recipe-controls .meas-label{ grid-row:auto !important; }
  .recipe-controls .bl-select.measure-select,
  .recipe-controls .measure-select{ grid-row:auto !important; }
  .recipe-controls .thickness-label{ grid-row:auto !important; }
  .recipe-controls .bl-select.thickness-select,
  .recipe-controls .thickness-select{ grid-row:auto !important; }
  .recipe-controls .reset{ grid-row:auto !important; }
  .scale-block.is-open .scale-tools{ grid-template-columns:1fr !important; }
  .scale-apply{ width:100%; }
}


/* --------------------------------------------------------------------------
   Final contract: title line + stacked control rows
   - Title/star always on line 1
   - Batch Multiplier on its own line
   - Measurement Type on its own line
   - Scale By Ingredient on its own line inside the same controls card
   -------------------------------------------------------------------------- */
.recipe-title-row{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  width:100% !important;
}
.recipe-title-row > h2,
.recipe-title-row > h3{
  flex:1 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
}
.recipe-title-row .fav-btn{
  margin-left:auto !important;
  align-self:flex-start !important;
  flex:0 0 auto !important;
}
.recipe-controls-anchor{
  display:block;
  width:100%;
  min-height:0;
}

#recipes .recipe-page .multiplier.recipe-controls{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  column-gap:12px;
  row-gap:10px;
  align-items:center;
  width:100%;
}
#recipes .recipe-page .multiplier.recipe-controls .batch-label{ grid-column:1; grid-row:1; }
#recipes .recipe-page .multiplier.recipe-controls .bl-number.batch-input,
#recipes .recipe-page .multiplier.recipe-controls .batch-input{
  grid-column:2;
  grid-row:1;
  justify-self:start;
}
#recipes .recipe-page .multiplier.recipe-controls .meas-label{ grid-column:1; grid-row:2; }
#recipes .recipe-page .multiplier.recipe-controls .bl-select.measure-select,
#recipes .recipe-page .multiplier.recipe-controls .measure-select{
  grid-column:2;
  grid-row:2;
  justify-self:start;
  width:auto !important;
  max-width:100%;
}
#recipes .recipe-page .multiplier.recipe-controls .oat-label,
#recipes .recipe-page .multiplier.recipe-controls .thickness-label{
  grid-column:1;
  grid-row:3;
}
#recipes .recipe-page .multiplier.recipe-controls .oat-toggle,
#recipes .recipe-page .multiplier.recipe-controls .bl-select.thickness-select,
#recipes .recipe-page .multiplier.recipe-controls .thickness-select{
  grid-column:2;
  grid-row:3;
  justify-self:start;
  width:auto !important;
  max-width:100%;
}
#recipes .recipe-page .multiplier.recipe-controls .apply{
  grid-column:3;
  grid-row:1;
  justify-self:end;
  align-self:start;
}
#recipes .recipe-page .multiplier.recipe-controls .reset{
  grid-column:3;
  grid-row:2;
  justify-self:end;
  align-self:start;
}
#recipes .recipe-page .multiplier.recipe-controls .scale-block{
  grid-column:1 / -1;
  justify-self:stretch;
  align-self:start;
  width:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#recipes .recipe-page .multiplier.recipe-controls .scale-toggle{
  margin:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#recipes .recipe-page .multiplier.recipe-controls .scale-tools{
  width:100%;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#recipes .recipe-page .multiplier.recipe-controls .scale-block.is-open .scale-tools{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(90px, 110px) minmax(16ch, 1fr) auto;
  gap:10px;
  align-items:center;
}

@media (max-width: 900px){
  #recipes .recipe-page .multiplier.recipe-controls{
    grid-template-columns:1fr !important;
  }
  #recipes .recipe-page .multiplier.recipe-controls .batch-label,
  #recipes .recipe-page .multiplier.recipe-controls .bl-number.batch-input,
  #recipes .recipe-page .multiplier.recipe-controls .batch-input,
  #recipes .recipe-page .multiplier.recipe-controls .meas-label,
  #recipes .recipe-page .multiplier.recipe-controls .bl-select.measure-select,
  #recipes .recipe-page .multiplier.recipe-controls .measure-select,
  #recipes .recipe-page .multiplier.recipe-controls .oat-label,
  #recipes .recipe-page .multiplier.recipe-controls .oat-toggle,
  #recipes .recipe-page .multiplier.recipe-controls .thickness-label,
  #recipes .recipe-page .multiplier.recipe-controls .bl-select.thickness-select,
  #recipes .recipe-page .multiplier.recipe-controls .thickness-select,
  #recipes .recipe-page .multiplier.recipe-controls .apply,
  #recipes .recipe-page .multiplier.recipe-controls .reset,
  #recipes .recipe-page .multiplier.recipe-controls .scale-block{
    grid-column:1 !important;
    justify-self:stretch !important;
    width:100% !important;
  }
  #recipes .recipe-page .multiplier.recipe-controls .bl-number.batch-input{
    max-width:none !important;
    min-width:0 !important;
  }
  #recipes .recipe-page .multiplier.recipe-controls .scale-block.is-open .scale-tools{
    grid-template-columns:1fr !important;
  }
}


/* --------------------------------------------------------------------------
   Contract restore — final hard override
   - Title/star = line 1
   - Batch Multiplier = line 2
   - Measurement Type = line 3
   - Scale By Ingredient = line 4
   -------------------------------------------------------------------------- */
.recipe-title-row{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
  width:100% !important;
  flex-wrap:nowrap !important;
  margin:0 0 12px 0 !important;
}
.recipe-title-row > h2,
.recipe-title-row > h3{
  margin:0 !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}
.recipe-title-row .fav-btn{
  flex:0 0 auto !important;
  margin-left:auto !important;
  align-self:flex-start !important;
}

.multiplier.recipe-controls{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  align-items:stretch !important;
  width:100% !important;
}
.multiplier.recipe-controls .recipe-control-row{
  display:grid !important;
  grid-template-columns:minmax(170px, 240px) minmax(0, 1fr) !important;
  gap:12px !important;
  align-items:center !important;
  width:100% !important;
}
.multiplier.recipe-controls .recipe-control-label{
  margin:0 !important;
  white-space:nowrap !important;
}
.multiplier.recipe-controls .recipe-control-value{
  min-width:0 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:center !important;
  width:100% !important;
}
.multiplier.recipe-controls .recipe-control-value > *{
  min-width:0 !important;
}
.multiplier.recipe-controls .recipe-control-row--batch .bl-number.batch-input,
.multiplier.recipe-controls .recipe-control-row--batch .batch-input.bl-number{
  width:138px !important;
  min-width:138px !important;
  max-width:138px !important;
}
.multiplier.recipe-controls .recipe-control-row--measurement .measure-select,
.multiplier.recipe-controls .recipe-control-row--measurement .bl-select{
  flex:1 1 260px !important;
  min-width:0 !important;
  width:auto !important;
  max-width:100% !important;
}
.multiplier.recipe-controls .recipe-control-row--measurement .reset,
.multiplier.recipe-controls .recipe-control-row--measurement .apply{
  flex:0 0 auto !important;
}
.multiplier.recipe-controls .recipe-control-row--oats .recipe-control-value,
.multiplier.recipe-controls .recipe-control-row--thickness .recipe-control-value{
  justify-content:flex-start !important;
}
.multiplier.recipe-controls .recipe-control-row--scale{
  grid-template-columns:1fr !important;
  align-items:start !important;
}
.multiplier.recipe-controls .recipe-control-row--scale .recipe-control-value{
  display:block !important;
  width:100% !important;
}
.multiplier.recipe-controls .recipe-control-row--scale .scale-block{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.multiplier.recipe-controls .recipe-control-row--scale .scale-toggle{
  display:inline-flex !important;
  width:auto !important;
  justify-content:flex-start !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.multiplier.recipe-controls .recipe-control-row--scale .scale-toggle:hover,
.multiplier.recipe-controls .recipe-control-row--scale .scale-toggle:focus,
.multiplier.recipe-controls .recipe-control-row--scale .scale-toggle:focus-visible{
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}
.multiplier.recipe-controls .recipe-control-row--scale .scale-tools{
  margin-top:10px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.multiplier.recipe-controls .recipe-control-row--scale .scale-tools > .label{
  display:none !important;
}
.multiplier.recipe-controls .recipe-control-row--scale .scale-block:not(.is-open) .scale-tools{
  display:none !important;
}
.multiplier.recipe-controls .recipe-control-row--scale .scale-block.is-open .scale-tools{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(90px, 110px) minmax(16ch, 1fr) auto !important;
  gap:10px !important;
  align-items:center !important;
  width:100% !important;
}
.multiplier.recipe-controls .recipe-control-row--scale .scale-amount-input{
  width:100% !important;
  min-width:16ch !important;
  max-width:100% !important;
}

@media (max-width: 900px){
  .multiplier.recipe-controls .recipe-control-row{
    grid-template-columns:1fr !important;
    align-items:start !important;
  }
  .multiplier.recipe-controls .recipe-control-label{
    margin:0 0 -2px 0 !important;
  }
  .multiplier.recipe-controls .recipe-control-row--batch .bl-number.batch-input,
  .multiplier.recipe-controls .recipe-control-row--batch .batch-input.bl-number,
  .multiplier.recipe-controls .recipe-control-row .bl-select,
  .multiplier.recipe-controls .recipe-control-row input,
  .multiplier.recipe-controls .recipe-control-row select,
  .multiplier.recipe-controls .recipe-control-row button{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  .multiplier.recipe-controls .recipe-control-row--scale .scale-block.is-open .scale-tools{
    grid-template-columns:1fr !important;
  }
}


/* --------------------------------------------------------------------------
   Final contract restore
   - Title + star on their own line
   - Batch / Measurement / Scale each on their own line
   - Keeps Scale By Ingredient collapsed by default inside the same control card
   -------------------------------------------------------------------------- */
.recipe-title-row{
  display:flex !important;
  width:100% !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}
.recipe-title-row > h2,
.recipe-title-row > h3{
  flex:1 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
}
.recipe-title-row .fav-btn{
  flex:0 0 auto !important;
  margin-left:12px !important;
}

.multiplier.recipe-controls{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  align-items:stretch !important;
  width:100% !important;
}
.recipe-control-row{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
  width:100%;
}
.recipe-control-row .label{
  margin:0 !important;
  white-space:nowrap;
}
.recipe-control-row .bl-number,
.recipe-control-row select,
.recipe-control-row .oat-toggle{
  min-width:0;
  max-width:100%;
}
.recipe-control-row .bl-number.batch-input,
.recipe-control-row .batch-input.bl-number{
  width:138px !important;
  min-width:138px !important;
  max-width:138px !important;
  justify-self:start !important;
}
.recipe-control-row .measure-select{
  width:min(320px, 100%) !important;
  max-width:320px !important;
  justify-self:start !important;
}
.recipe-control-row .thickness-select{
  width:min(220px, 100%) !important;
  max-width:220px !important;
  justify-self:start !important;
}
.recipe-control-row .reset,
.recipe-control-row .apply{
  justify-self:start;
}
.recipe-controls > .scale-block{
  grid-column:1 / -1;
  width:100%;
  margin:0 !important;
}
.recipe-controls > .scale-block .scale-toggle{
  justify-self:start;
}
.recipe-controls > .scale-block .scale-tools{
  margin-top:10px;
}
@media (max-width: 900px){
  .recipe-control-row{
    grid-template-columns:1fr;
    gap:10px;
    align-items:start;
  }
  .recipe-control-row .bl-number.batch-input,
  .recipe-control-row .batch-input.bl-number,
  .recipe-control-row .measure-select,
  .recipe-control-row .thickness-select,
  .recipe-control-row .oat-toggle,
  .recipe-control-row .reset,
  .recipe-control-row .apply{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }
}


/* --------------------------------------------------------------------------
   Final hard contract: title/star own line, controls stacked by line
   - Line 1: title + star
   - Line 2: Batch Multiplier
   - Line 3: Measurement Type
   - Line 4: Scale By Ingredient (collapsed by default)
   -------------------------------------------------------------------------- */
.recipe-page > .recipe-title-row{
  display:flex !important;
  width:100% !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  clear:both;
  margin:0 0 12px 0 !important;
}
.recipe-page > .recipe-title-row > h2,
.recipe-page > .recipe-title-row > h3{
  flex:1 1 auto !important;
  min-width:0 !important;
}
.recipe-page > .recipe-controls{
  display:grid !important;
  width:100% !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  align-items:stretch !important;
  clear:both;
}
.recipe-control-row{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:12px;
  align-items:center;
  width:100%;
}
.recipe-control-row .label{
  white-space:nowrap;
  margin:0 !important;
}
.recipe-control-row > :not(.label):not(.recipe-control-actions){
  min-width:0;
}
.recipe-control-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:10px;
}
.recipe-control-row .measure-select,
.recipe-control-row .thickness-select,
.recipe-control-row .oat-toggle{
  min-width:0;
  max-width:100%;
}
.recipe-controls > .scale-block{
  width:100%;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.recipe-controls > .scale-block .scale-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.recipe-controls > .scale-block .scale-toggle:hover,
.recipe-controls > .scale-block .scale-toggle:focus,
.recipe-controls > .scale-block .scale-toggle:focus-visible{
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}
.recipe-controls > .scale-block .scale-tools{
  margin:10px 0 0 0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.recipe-controls > .scale-block .scale-tools > .label{
  display:none !important;
}
.recipe-controls > .scale-block.is-open .scale-tools{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(90px, 110px) minmax(16ch, 1fr) auto;
  gap:10px;
  align-items:center;
}
.recipe-controls > .scale-block .scale-msg{
  margin-top:8px;
}
@media (max-width: 900px){
  .recipe-control-row{
    grid-template-columns:1fr;
    align-items:start;
  }
  .recipe-control-actions{
    width:100%;
  }
  .recipe-control-actions > *{
    width:100%;
  }
  .recipe-controls > .scale-block.is-open .scale-tools{
    grid-template-columns:1fr;
    align-items:start;
  }
}


/* --------------------------------------------------------------------------
   Focused recipe contract
   - Title/star on line 1
   - Batch Multiplier on line 2
   - Measurement Type on line 3
   - Scale By Ingredient on line 4
   - Any recipe-specific controls continue below that fixed block
   -------------------------------------------------------------------------- */
#recipes.recipe-open-mode .recipe-page.active .recipe-title-row,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-title-row{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  width:100%;
  margin:0 0 12px 0 !important;
}

#recipes.recipe-open-mode .recipe-page.active .recipe-controls,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-controls{
  display:grid !important;
  grid-template-columns:auto minmax(0, 1fr) auto;
  column-gap:12px;
  row-gap:10px;
  align-items:center;
  width:100%;
}

#recipes.recipe-open-mode .recipe-page.active .recipe-controls .label,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-controls .label{
  white-space:nowrap;
  margin:0;
}

#recipes.recipe-open-mode .recipe-page.active .recipe-controls .batch-label,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-controls .batch-label{ grid-column:1; grid-row:1; }
#recipes.recipe-open-mode .recipe-page.active .recipe-controls .bl-number.batch-input,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-controls .bl-number.batch-input{ grid-column:2; grid-row:1; justify-self:start; }
#recipes.recipe-open-mode .recipe-page.active .recipe-controls .reset,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-controls .reset{ grid-column:3; grid-row:1; justify-self:start; }

#recipes.recipe-open-mode .recipe-page.active .recipe-controls .meas-label,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-controls .meas-label{ grid-column:1; grid-row:2; }
#recipes.recipe-open-mode .recipe-page.active .recipe-controls .measure-select,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-controls .measure-select{ grid-column:2; grid-row:2; justify-self:start; min-width:0; max-width:100%; }

#recipes.recipe-open-mode .recipe-page.active .recipe-controls .oat-label,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-controls .oat-label{ grid-column:1; grid-row:3; }
#recipes.recipe-open-mode .recipe-page.active .recipe-controls .oat-toggle,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-controls .oat-toggle{ grid-column:2; grid-row:3; justify-self:start; }

#recipes.recipe-open-mode .recipe-page.active .recipe-controls .thickness-label,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-controls .thickness-label{ grid-column:1; grid-row:3; }
#recipes.recipe-open-mode .recipe-page.active .recipe-controls .thickness-select,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-controls .thickness-select{ grid-column:2; grid-row:3; justify-self:start; min-width:0; max-width:100%; }

#recipes.recipe-open-mode .recipe-page.active .recipe-controls .scale-block,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-controls .scale-block{
  grid-column:1 / -1;
  grid-row:3;
  width:100%;
  margin:0;
}

#recipes.recipe-open-mode .recipe-page.active .recipe-controls.has-oat-toggle .scale-block,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-controls.has-oat-toggle .scale-block,
#recipes.recipe-open-mode .recipe-page.active .recipe-controls.has-thickness .scale-block,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-controls.has-thickness .scale-block{
  grid-row:4;
}

#recipes.recipe-open-mode .recipe-page.active .recipe-controls .apply,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-controls .apply{
  grid-column:3;
  grid-row:2;
  justify-self:start;
}

#recipes.recipe-open-mode .recipe-page.active .recipe-controls .bl-number.batch-input,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-controls .bl-number.batch-input{
  width:138px !important;
  max-width:138px !important;
  min-width:138px !important;
}

#recipes.recipe-open-mode .recipe-page.active .recipe-controls .measure-select,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-controls .measure-select,
#recipes.recipe-open-mode .recipe-page.active .recipe-controls .thickness-select,
#recipes.recipe-detail-open .recipe-page.is-open .recipe-controls .thickness-select{
  width:auto;
}

@media (max-width: 900px){
  #recipes.recipe-open-mode .recipe-page.active .recipe-title-row,
  #recipes.recipe-detail-open .recipe-page.is-open .recipe-title-row{
    display:flex !important;
    justify-content:space-between !important;
  }
}


/* --------------------------------------------------------------------------
   Final contract override for current JS structure (.recipe-control-row)
   -------------------------------------------------------------------------- */
#recipes .recipe-page .recipe-title-row{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  width:100% !important;
}
#recipes .recipe-page .recipe-title-row > h2,
#recipes .recipe-page .recipe-title-row > h3{
  flex:1 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
}
#recipes .recipe-page .recipe-title-row .fav-btn{
  margin-left:auto !important;
  align-self:flex-start !important;
  flex:0 0 auto !important;
}

#recipes .recipe-page .multiplier.recipe-controls{
  display:grid !important;
  grid-template-columns:1fr !important;
  row-gap:10px;
  align-items:start;
  width:100%;
}
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row{
  display:grid !important;
  grid-template-columns:auto minmax(0, 1fr) auto;
  column-gap:12px;
  row-gap:8px;
  align-items:center;
  width:100%;
}
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row > .label{
  white-space:nowrap;
  margin:0;
}
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--batch > .label{ grid-column:1; }
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--batch > .batch-input,
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--batch > .bl-number.batch-input{
  grid-column:2;
  justify-self:start;
}
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--batch > .apply{
  grid-column:3;
  justify-self:end;
}
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--measurement > .label{ grid-column:1; }
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--measurement > .bl-select.measure-select,
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--measurement > .measure-select{
  grid-column:2;
  justify-self:start;
  width:auto !important;
  max-width:100%;
}
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--measurement > .reset{
  grid-column:3;
  justify-self:end;
}
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--oat > .label,
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--thickness > .label{
  grid-column:1;
}
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--oat > .oat-toggle,
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--thickness > .bl-select.thickness-select,
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--thickness > .thickness-select{
  grid-column:2;
  justify-self:start;
  width:auto !important;
  max-width:100%;
}
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--scale{
  grid-template-columns:1fr;
}
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--scale > .scale-block{
  width:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--scale > .scale-block > .scale-toggle{
  margin:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--scale > .scale-block > .scale-tools{
  width:100%;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--scale > .scale-block.is-open > .scale-tools{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(90px, 110px) minmax(16ch, 1fr) auto;
  gap:10px;
  align-items:center;
}

@media (max-width: 900px){
  #recipes .recipe-page .multiplier.recipe-controls .recipe-control-row{
    grid-template-columns:1fr !important;
  }
  #recipes .recipe-page .multiplier.recipe-controls .recipe-control-row > .label,
  #recipes .recipe-page .multiplier.recipe-controls .recipe-control-row > .batch-input,
  #recipes .recipe-page .multiplier.recipe-controls .recipe-control-row > .bl-number.batch-input,
  #recipes .recipe-page .multiplier.recipe-controls .recipe-control-row > .bl-select.measure-select,
  #recipes .recipe-page .multiplier.recipe-controls .recipe-control-row > .measure-select,
  #recipes .recipe-page .multiplier.recipe-controls .recipe-control-row > .oat-toggle,
  #recipes .recipe-page .multiplier.recipe-controls .recipe-control-row > .bl-select.thickness-select,
  #recipes .recipe-page .multiplier.recipe-controls .recipe-control-row > .thickness-select,
  #recipes .recipe-page .multiplier.recipe-controls .recipe-control-row > .apply,
  #recipes .recipe-page .multiplier.recipe-controls .recipe-control-row > .reset,
  #recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--scale > .scale-block{
    grid-column:1 !important;
    justify-self:stretch !important;
    width:100% !important;
  }
  #recipes .recipe-page .multiplier.recipe-controls .recipe-control-row--scale > .scale-block.is-open > .scale-tools{
    grid-template-columns:1fr !important;
  }
}


/* --------------------------------------------------------------------------
   Operational hard override: recipe title + controls stack
   - title/star own line
   - Batch row: label | compact field+arrows | reset
   - Measurement row: label | dropdown
   - Scale row: own line, tools start from left, button sits next to quantity
   -------------------------------------------------------------------------- */
#recipes .recipe-page > .recipe-actions,
#recipes .recipe-page > .recipe-title-row,
#recipes .recipe-page > .multiplier.recipe-controls,
#recipes .recipe-page > .print-summary,
#recipes .recipe-page > .info-link,
#recipes .recipe-page > .note,
#recipes .recipe-page > .variant-switcher,
#recipes .recipe-page > .recipe-controls-anchor{
  display:block !important;
  width:100% !important;
  clear:both !important;
}

#recipes .recipe-page > .recipe-title-row{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  margin:0 0 12px 0 !important;
}
#recipes .recipe-page > .recipe-title-row > h2,
#recipes .recipe-page > .recipe-title-row > h3{
  margin:0 !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}
#recipes .recipe-page > .recipe-title-row > .fav-btn{
  margin:0 0 0 12px !important;
  align-self:flex-start !important;
  flex:0 0 auto !important;
}

#recipes .recipe-page > .multiplier.recipe-controls{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  align-items:stretch !important;
  width:100% !important;
  clear:both !important;
  margin:0 0 12px 0 !important;
  float:none !important;
}

#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row,
#recipes .recipe-page > .multiplier.recipe-controls > .scale-block{
  width:100% !important;
  clear:both !important;
}

#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row{
  display:grid !important;
  align-items:center !important;
  column-gap:10px !important;
  row-gap:8px !important;
  justify-content:start !important;
}

#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row > .label{
  white-space:nowrap !important;
  margin:0 !important;
}

#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch{
  grid-template-columns:max-content 138px max-content !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input,
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number,
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input{
  width:138px !important;
  min-width:138px !important;
  max-width:138px !important;
  justify-self:start !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .reset,
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .apply{
  justify-self:start !important;
  margin:0 !important;
}

#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--measurement{
  grid-template-columns:max-content minmax(240px, 340px) auto !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--measurement > .bl-select,
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--measurement > .measure-select{
  width:100% !important;
  min-width:240px !important;
  max-width:340px !important;
  justify-self:start !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--measurement > .apply,
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--measurement > .reset{
  justify-self:start !important;
  margin:0 !important;
}

#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--oat,
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--thickness{
  grid-template-columns:max-content minmax(240px, 420px) !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--oat > .oat-toggle,
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--thickness > .bl-select,
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--thickness > .thickness-select{
  width:100% !important;
  max-width:420px !important;
  justify-self:start !important;
}

#recipes .recipe-page > .multiplier.recipe-controls > .scale-block{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .scale-block > .scale-toggle{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  margin:0 !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .scale-block > .scale-tools{
  margin:10px 0 0 0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .scale-block.is-open > .scale-tools{
  display:grid !important;
  grid-template-columns:minmax(240px, 320px) 110px 180px auto !important;
  gap:10px !important;
  align-items:center !important;
  justify-content:start !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .scale-block.is-open > .scale-tools > .bl-select,
#recipes .recipe-page > .multiplier.recipe-controls > .scale-block.is-open > .scale-tools > select{
  width:100% !important;
  justify-self:start !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .scale-block.is-open > .scale-tools > .scale-amount-input{
  width:180px !important;
  min-width:180px !important;
  max-width:180px !important;
  flex:none !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .scale-block.is-open > .scale-tools > .scale-apply{
  justify-self:start !important;
  margin:0 !important;
}

@media (max-width: 900px){
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row{
    grid-template-columns:1fr !important;
  }
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row > .label,
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row > .bl-number.batch-input,
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row > .batch-input.bl-number,
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row > .batch-input,
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row > .bl-select,
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row > select,
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row > .oat-toggle,
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row > .apply,
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row > .reset,
  #recipes .recipe-page > .multiplier.recipe-controls > .scale-block{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    justify-self:stretch !important;
  }
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input,
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number,
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  #recipes .recipe-page > .multiplier.recipe-controls > .scale-block.is-open > .scale-tools{
    grid-template-columns:1fr !important;
  }
  #recipes .recipe-page > .multiplier.recipe-controls > .scale-block.is-open > .scale-tools > .scale-amount-input{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  #recipes .recipe-page > .multiplier.recipe-controls > .scale-block.is-open > .scale-tools > .scale-apply{
    width:100% !important;
  }
}


/* --------------------------------------------------------------------------
   Final operational override
   - keep Back left and Print right
   - add a little more spacing around the recipe title
   -------------------------------------------------------------------------- */
#recipes .recipe-page > .recipe-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin:0 0 12px 0 !important;
  flex-wrap:nowrap !important;
}
#recipes .recipe-page > .recipe-actions > .back-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  margin:0 !important;
}
#recipes .recipe-page > .recipe-actions > .recipe-actions-right{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex:1 1 auto !important;
  margin-left:auto !important;
}
#recipes .recipe-page > .recipe-actions > .recipe-actions-right > .print-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
}
#recipes .recipe-page > .recipe-title-row{
  padding:8px 0 6px !important;
  margin:6px 0 20px 0 !important;
}
@media (max-width: 720px){
  #recipes .recipe-page > .recipe-actions{
    flex-direction:row !important;
    align-items:center !important;
  }
  #recipes .recipe-page > .recipe-actions > .recipe-actions-right{
    width:auto !important;
  }
  #recipes .recipe-page > .recipe-actions .back-btn,
  #recipes .recipe-page > .recipe-actions .print-btn{
    width:auto !important;
  }
}


/* baseline-recipes final patch: reliable title spacing + action alignment + batch control order */
#recipes .recipe-page > .recipe-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  margin:0 0 16px 0 !important;
  flex-wrap:nowrap !important;
}
#recipes .recipe-page > .recipe-actions > .back-btn{
  margin:0 !important;
  justify-content:flex-start !important;
}
#recipes .recipe-page > .recipe-actions > .recipe-actions-right{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  margin-left:auto !important;
  flex:1 1 auto !important;
}
#recipes .recipe-page > .recipe-actions > .recipe-actions-right > .print-btn,
#recipes .recipe-page > .recipe-actions > .print-btn:last-child{
  margin:0 0 0 auto !important;
}
#recipes .recipe-page > .recipe-title-row{
  padding:12px 0 10px !important;
  margin:10px 0 24px 0 !important;
}
#recipes .recipe-page > .recipe-title-row > h2,
#recipes .recipe-page > .recipe-title-row > h3{
  margin:0 !important;
  line-height:1.18 !important;
}
#recipes .recipe-page > .info-link{
  display:inline-flex !important;
  margin:0 0 16px 0 !important;
}
#recipes .recipe-page > .multiplier.recipe-controls{
  display:grid !important;
  gap:12px !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch{
  display:grid !important;
  grid-template-columns:minmax(170px,max-content) minmax(220px,260px) auto !important;
  align-items:center !important;
  gap:12px !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .label{
  grid-column:1 !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input,
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input{
  grid-column:2 !important;
  width:100% !important;
  min-width:0 !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .reset{
  grid-column:3 !important;
  justify-self:start !important;
  margin:0 !important;
}
#recipes .recipe-page > .multiplier.recipe-controls .bl-number,
#recipes .recipe-page > .multiplier.recipe-controls .batch-input.bl-number,
#recipes .recipe-page > .multiplier.recipe-controls .bl-number.batch-input{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 42px !important;
  align-items:stretch !important;
  width:100% !important;
  min-width:0 !important;
}
#recipes .recipe-page > .multiplier.recipe-controls .bl-number > input{
  width:100% !important;
  min-width:0 !important;
}
#recipes .recipe-page > .multiplier.recipe-controls .bl-number-stepper{
  display:grid !important;
  grid-template-rows:1fr 1fr !important;
  width:42px !important;
}
#recipes .recipe-page > .multiplier.recipe-controls .bl-number-stepper > .bl-step{
  min-width:42px !important;
}
@media (max-width: 780px){
  #recipes .recipe-page > .recipe-actions{
    flex-wrap:wrap !important;
  }
  #recipes .recipe-page > .recipe-actions > .recipe-actions-right{
    width:auto !important;
  }
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch{
    grid-template-columns:1fr !important;
  }
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .label,
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input,
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input,
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .reset{
    grid-column:auto !important;
    justify-self:start !important;
  }
}


/* --------------------------------------------------------------------------
   Final batch multiplier hard override
   - Order: label | text field with arrows | reset
   - Wider field for decimal entry
   -------------------------------------------------------------------------- */
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch{
  display:grid !important;
  grid-template-columns:minmax(170px,max-content) minmax(280px,320px) auto !important;
  align-items:center !important;
  gap:12px !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .label{
  grid-column:1 !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input,
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input{
  grid-column:2 !important;
  width:100% !important;
  min-width:280px !important;
  max-width:320px !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input,
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 44px !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number > input{
  width:100% !important;
  min-width:0 !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .reset{
  grid-column:3 !important;
  justify-self:start !important;
  margin:0 !important;
}
@media (max-width: 780px){
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch{
    grid-template-columns:1fr !important;
  }
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input,
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input{
    min-width:0 !important;
    max-width:none !important;
  }
}


/* --------------------------------------------------------------------------
   Targeted batch multiplier correction
   - Order: Batch Multiplier -> Text Field -> Up/Down Arrows -> Reset
   - Prevent overlap with Reset
   - Arrow controls move in 0.5 increments; manual input remains free-form
   -------------------------------------------------------------------------- */
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .label{
  flex:0 0 auto !important;
  white-space:nowrap !important;
  min-width:max-content !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input,
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number{
  flex:0 0 236px !important;
  width:236px !important;
  min-width:236px !important;
  max-width:236px !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 40px !important;
  align-items:stretch !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input > input,
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number > input{
  width:100% !important;
  min-width:0 !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input .bl-number-stepper,
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number .bl-number-stepper{
  width:40px !important;
}
#recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch > .reset{
  flex:0 0 auto !important;
  margin:0 !important;
  justify-self:auto !important;
}
@media (max-width: 780px){
  #recipes .recipe-page > .multiplier.recipe-controls > .recipe-control-row--batch{
    flex-wrap:wrap !important;
    align-items:flex-start !important;
  }
}


/* --------------------------------------------------------------------------
   Authoritative batch multiplier layout
   - Order: Batch Multiplier -> Text Field -> Up/Down Arrows -> Reset
   - Arrow controls stay attached to the field
   - Manual decimal entry remains available
   - Arrow step/min are handled in baseline-shared.js (0.5 step, 0.5 floor)
   -------------------------------------------------------------------------- */
#recipes .multiplier.recipe-controls > .recipe-control-row--batch,
.multiplier.recipe-controls > .recipe-control-row--batch{
  display:grid !important;
  grid-template-columns:max-content minmax(216px, 220px) max-content !important;
  align-items:center !important;
  column-gap:12px !important;
  row-gap:10px !important;
  flex-wrap:unset !important;
}
#recipes .multiplier.recipe-controls > .recipe-control-row--batch > .label,
.multiplier.recipe-controls > .recipe-control-row--batch > .label{
  grid-column:1 !important;
  white-space:nowrap !important;
  min-width:max-content !important;
  margin:0 !important;
}
#recipes .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input,
#recipes .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number,
#recipes .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input,
.multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input,
.multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number,
.multiplier.recipe-controls > .recipe-control-row--batch > .batch-input{
  grid-column:2 !important;
  width:100% !important;
  min-width:216px !important;
  max-width:220px !important;
  justify-self:start !important;
}
#recipes .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input,
#recipes .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number,
.multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input,
.multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) 40px !important;
  align-items:stretch !important;
  gap:6px !important;
}
#recipes .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input > input,
#recipes .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number > input,
.multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input > input,
.multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number > input{
  width:100% !important;
  min-width:0 !important;
}
#recipes .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input .bl-number-stepper,
#recipes .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number .bl-number-stepper,
.multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input .bl-number-stepper,
.multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number .bl-number-stepper{
  width:40px !important;
}
#recipes .multiplier.recipe-controls > .recipe-control-row--batch > .reset,
#recipes .multiplier.recipe-controls > .recipe-control-row--batch > .apply,
.multiplier.recipe-controls > .recipe-control-row--batch > .reset,
.multiplier.recipe-controls > .recipe-control-row--batch > .apply{
  grid-column:3 !important;
  justify-self:start !important;
  margin:0 !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
@media (max-width: 780px){
  #recipes .multiplier.recipe-controls > .recipe-control-row--batch,
  .multiplier.recipe-controls > .recipe-control-row--batch{
    grid-template-columns:1fr !important;
  }
  #recipes .multiplier.recipe-controls > .recipe-control-row--batch > .label,
  #recipes .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input,
  #recipes .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number,
  #recipes .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input,
  #recipes .multiplier.recipe-controls > .recipe-control-row--batch > .reset,
  #recipes .multiplier.recipe-controls > .recipe-control-row--batch > .apply,
  .multiplier.recipe-controls > .recipe-control-row--batch > .label,
  .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input,
  .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number,
  .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input,
  .multiplier.recipe-controls > .recipe-control-row--batch > .reset,
  .multiplier.recipe-controls > .recipe-control-row--batch > .apply{
    grid-column:auto !important;
    min-width:0 !important;
    max-width:none !important;
    width:100% !important;
  }
}

/* --------------------------------------------------------------------------
   Final batch line order lock
   - Order: Batch Multiplier | Text Field | Arrows | Reset
   - Preserves the existing horizontal footprint of the combined field+stepper
   -------------------------------------------------------------------------- */
#recipes .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input,
#recipes .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number,
.multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input,
.multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number{
  direction:ltr !important;
  grid-template-columns:minmax(0, 1fr) 40px !important;
}
#recipes .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input > input,
#recipes .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number > input,
.multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input > input,
.multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number > input{
  grid-column:1 !important;
  order:1 !important;
}
#recipes .multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input > .bl-number-stepper,
#recipes .multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number > .bl-number-stepper,
.multiplier.recipe-controls > .recipe-control-row--batch > .bl-number.batch-input > .bl-number-stepper,
.multiplier.recipe-controls > .recipe-control-row--batch > .batch-input.bl-number > .bl-number-stepper{
  grid-column:2 !important;
  order:2 !important;
}


/* BASELINE-SOLID-SURFACE-CONTRACT-20260527
   Page gradients stay on the page/banner. Cards, recipe controls, account fields,
   panel controls, and sliders use solid opaque colours sampled from each page palette. */
body[data-app="home"]{
  --bl-surface-card-solid:#3d3d43;
  --bl-surface-panel-solid:#47474d;
  --bl-surface-control-solid:#56565f;
  --bl-surface-input-solid:#4f4f58;
  --bl-surface-active-solid:#6a6a74;
  --bl-surface-ink:#f4efe7;
  --bl-slider-track-solid:#47474d;
  --bl-slider-thumb-solid:#9b9baa;
  --bl-slider-border-solid:#2b2b30;
  --bl-home-account-gradient:linear-gradient(90deg,#2f3035 0%,#50515a 30%,#757680 50%,#50515a 70%,#2f3035 100%);
}
body[data-app="food"]{
  --bl-surface-card-solid:#f5b84a;
  --bl-surface-recipe-card-solid:#ffb000;
  --bl-surface-panel-solid:#e98225;
  --bl-surface-control-solid:#ee942d;
  --bl-surface-input-solid:#ffb13b;
  --bl-surface-active-solid:#c92727;
  --bl-surface-ink:#1b0b09;
  --bl-slider-track-solid:#b11226;
  --bl-slider-thumb-solid:#ffb000;
  --bl-slider-border-solid:#7a1a21;
}
body[data-app="skin"]{
  --bl-surface-card-solid:#d99a82;
  --bl-surface-recipe-card-solid:#d89178;
  --bl-surface-panel-solid:#c87962;
  --bl-surface-control-solid:#cf8167;
  --bl-surface-input-solid:#e0aa94;
  --bl-surface-active-solid:#b8644d;
  --bl-surface-ink:#2b2b28;
  --bl-slider-track-solid:#b8644d;
  --bl-slider-thumb-solid:#edd2c4;
  --bl-slider-border-solid:#7a4a3a;
}
body[data-app="massage"]{
  --bl-surface-card-solid:#aa7854;
  --bl-surface-recipe-card-solid:#b98159;
  --bl-surface-panel-solid:#b7855f;
  --bl-surface-control-solid:#b98159;
  --bl-surface-input-solid:#875d40;
  --bl-surface-active-solid:#c58d62;
  --bl-surface-ink:#24140b;
  --bl-slider-track-solid:#775036;
  --bl-slider-thumb-solid:#d2a078;
  --bl-slider-border-solid:#2f1a0e;
}
body[data-app="fitness"]{
  --bl-surface-card-solid:#130b10;
  --bl-surface-recipe-card-solid:#1d1016;
  --bl-surface-panel-solid:#1d1016;
  --bl-surface-control-solid:#701725;
  --bl-surface-input-solid:#2a1118;
  --bl-surface-active-solid:#9b1a2d;
  --bl-surface-ink:#f6eaf0;
  --bl-slider-track-solid:#2a1118;
  --bl-slider-thumb-solid:#9b1a2d;
  --bl-slider-border-solid:#f6eaf0;
}
body[data-app="badminton"]{
  --bl-surface-card-solid:#efdcfb;
  --bl-surface-recipe-card-solid:#e7cff6;
  --bl-surface-panel-solid:#e1c4f4;
  --bl-surface-control-solid:#d7b7ee;
  --bl-surface-input-solid:#efdcfb;
  --bl-surface-active-solid:#c29cff;
  --bl-surface-ink:#2c123f;
  --bl-slider-track-solid:#6a1fb3;
  --bl-slider-thumb-solid:#f08b2f;
  --bl-slider-border-solid:#2c123f;
}
body[data-app="games"]{
  --bl-surface-card-solid:#a5714d;
  --bl-surface-recipe-card-solid:#b9825c;
  --bl-surface-panel-solid:#b9825c;
  --bl-surface-control-solid:#bd875f;
  --bl-surface-input-solid:#7f5538;
  --bl-surface-active-solid:#d1a67e;
  --bl-surface-ink:#24140b;
  --bl-slider-track-solid:#623f28;
  --bl-slider-thumb-solid:#d8af86;
  --bl-slider-border-solid:#24140b;
}

/* Index header Account button: deliberately grey-gradient, tied to the grey header, with clear white text. */
body[data-app="home"] #bl-auth-toggle{
  background:var(--bl-home-account-gradient)!important;
  background-image:var(--bl-home-account-gradient)!important;
  background-color:#50515a!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  border-color:#9a9aa6!important;
  box-shadow:0 14px 28px -22px rgba(0,0,0,.55)!important;
}
body[data-app="home"] #bl-auth-toggle .bl-btn-label,
body[data-app="home"] #bl-auth-toggle .bl-btn-icon{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;}

/* Cards and panels: solid opaque surfaces on system pages, never translucent or gradient-filled. */
body:not([data-app="home"]) .card,
body:not([data-app="home"]) .method-card,
body:not([data-app="home"]) .logic-card,
body:not([data-app="home"]) .session-card,
body:not([data-app="home"]) .summary-box,
body:not([data-app="home"]) .progress-shell,
body:not([data-app="home"]) .empty-box,
body:not([data-app="home"]) .skill-item,
body:not([data-app="home"]) .game-summary-details,
body:not([data-app="home"]) .game-summary-body,
body:not([data-app="home"]) .formula-box,
body:not([data-app="home"]) .word-box,
body:not([data-app="home"]) .ninja-box,
body:not([data-app="home"]) .trackcoin-stat-card,
body:not([data-app="home"]) .realm-window,
body:not([data-app="home"]) .realm-drawer,
body:not([data-app="home"]) .realm-spirit-card,
body:not([data-app="home"]) .realm-stat-chip,
body:not([data-app="home"]) .realm-manage-card,
body:not([data-app="home"]) .system-section-card,
body:not([data-app="home"]) .system-panel,
body:not([data-app="home"]) .court-card,
body:not([data-app="home"]) .status-box,
body:not([data-app="home"]) .diet-log-panel,
body:not([data-app="home"]) .diet-food-row,
body:not([data-app="home"]) .diet-entry-card,
body:not([data-app="home"]) .diet-selected-card,
body:not([data-app="home"]) .diet-kpi-card,
body:not([data-app="home"]) .diet-mini-stat{
  background-image:none!important;
  background-color:var(--bl-surface-card-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Recipe area: warmer/deeper solid cards and solid controls, no internal gradients. */
body[data-app] #recipes .card,
body[data-app] #recipes .recipe.card,
body[data-app] #recipes-landing.card,
body[data-app] #recipes .recipe-page,
body[data-app] #recipes .side-recipe-nav,
body[data-app] #recipes .scale-tools,
body[data-app] .recipe.card{
  background-image:none!important;
  background-color:var(--bl-surface-recipe-card-solid,var(--bl-surface-card-solid))!important;
  opacity:1!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
body[data-app] #recipes .multiplier,
body[data-app] #recipes .filter-bar,
body[data-app] #recipes .glide-controller,
body[data-app] #recipes .scale-block,
body[data-app] #recipes .variant-switcher,
body[data-app] #recipes .recipe-controls{
  background-image:none!important;
  background-color:var(--bl-surface-panel-solid)!important;
  border-color:var(--border,var(--showall-border,rgba(0,0,0,.18)))!important;
  opacity:1!important;
  box-shadow:none!important;
}
body[data-app] #recipes .back-btn,
body[data-app] #recipes .print-btn,
body[data-app] #recipes .scale-toggle,
body[data-app] #recipes .scale-apply,
body[data-app] #recipes .multiplier button,
body[data-app] #recipes .ingredient-recipe-link a,
body[data-app] #recipes .action,
body[data-app] #recipes button,
body[data-app] #recipes .bl-number-stepper .bl-step,
body[data-app] #recipes .bl-select-btn,
body[data-app] #recipes .bl-select-menu [role="option"]{
  background-image:none!important;
  background-color:var(--bl-surface-control-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
  -webkit-text-fill-color:currentColor!important;
  border-color:var(--showall-border,var(--border,rgba(0,0,0,.18)))!important;
  opacity:1!important;
  box-shadow:none!important;
}
body[data-app] #recipes input:not([type="range"]),
body[data-app] #recipes select,
body[data-app] #recipes textarea,
body[data-app] #recipes .scale-tools input,
body[data-app] #recipes .scale-tools select,
body[data-app] #recipes .multiplier input,
body[data-app] #recipes .multiplier select{
  background-image:none!important;
  background-color:var(--bl-surface-input-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
  -webkit-text-fill-color:currentColor!important;
  border-color:var(--border-2,var(--border,rgba(0,0,0,.18)))!important;
  opacity:1!important;
  box-shadow:none!important;
}
body[data-app] #recipes .bl-select-menu,
body[data-app] #recipes .scale-tools{
  background-image:none!important;
  background-color:var(--bl-surface-panel-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
}

/* Account + Binaural flyouts: solid panels and solid fields/buttons from current page palette. */
body[data-app] #bl-auth-flyout .card,
body[data-app] #bl-beats-flyout .card,
body[data-app] .bl-flyout .card{
  background-image:none!important;
  background-color:var(--bl-surface-card-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
body[data-app] #bl-auth-flyout .bl-auth-input-shell,
body[data-app] #bl-auth-flyout input:not([type="range"]),
body[data-app] #bl-auth-flyout select,
body[data-app] #bl-auth-flyout textarea,
body[data-app] #bl-beats-flyout input:not([type="range"]),
body[data-app] #bl-beats-flyout select,
body[data-app] #bl-beats-flyout textarea,
body[data-app] .bl-flyout input:not([type="range"]),
body[data-app] .bl-flyout select,
body[data-app] .bl-flyout textarea{
  background-image:none!important;
  background-color:var(--bl-surface-input-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
  -webkit-text-fill-color:currentColor!important;
  caret-color:currentColor!important;
  border-color:var(--border-2,var(--border,rgba(0,0,0,.18)))!important;
  opacity:1!important;
  box-shadow:none!important;
}
body[data-app] #bl-auth-flyout .bl-auth-input-shell > input,
body[data-app] #bl-auth-flyout .bl-auth-input-shell > input:not([type="range"]){
  background:transparent!important;
  background-image:none!important;
  background-color:transparent!important;
}
body[data-app] #bl-auth-flyout .bl-mini-btn,
body[data-app] #bl-auth-flyout button,
body[data-app] #bl-beats-flyout .bl-mini-btn,
body[data-app] #bl-beats-flyout button,
body[data-app] .bl-flyout .bl-select-btn,
body[data-app] .bl-flyout .bl-select-menu [role="option"]{
  background-image:none!important;
  background-color:var(--bl-surface-control-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
  -webkit-text-fill-color:currentColor!important;
  border-color:var(--showall-border,var(--border,rgba(0,0,0,.18)))!important;
  opacity:1!important;
  box-shadow:none!important;
}
body[data-app] .bl-flyout .bl-select-menu{
  background-image:none!important;
  background-color:var(--bl-surface-panel-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
}

/* General page controls: solid tones from the page palette, not gradients. */
body:not([data-app="home"]) input:not([type="range"]),
body:not([data-app="home"]) select,
body:not([data-app="home"]) textarea,
body:not([data-app="home"]) .text-input,
body:not([data-app="home"]) .diet-static-value{
  background-image:none!important;
  background-color:var(--bl-surface-input-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
  -webkit-text-fill-color:currentColor!important;
  border-color:var(--border-2,var(--border,rgba(0,0,0,.18)))!important;
}
body:not([data-app="home"]) .action,
body:not([data-app="home"]) button.action,
body:not([data-app="home"]) .tab,
body:not([data-app="home"]) .game-toggle-btn,
body:not([data-app="home"]) .tier-btn,
body:not([data-app="home"]) .stat-pill,
body:not([data-app="home"]) .trait-chip,
body:not([data-app="home"]) .solution-box,
body:not([data-app="home"]) .clue-bar,
body:not([data-app="home"]) .number-chip,
body:not([data-app="home"]) .letter-cell,
body:not([data-app="home"]) .metric-chip,
body:not([data-app="home"]) .gameplan-subtab,
body:not([data-app="home"]) .diet-inline-note,
body:not([data-app="home"]) .diet-entry-macros span{
  background-image:none!important;
  background-color:var(--bl-surface-control-solid)!important;
  color:var(--ink,var(--bl-surface-ink,#111))!important;
  -webkit-text-fill-color:currentColor!important;
  border-color:var(--showall-border,var(--border,rgba(0,0,0,.18)))!important;
}
body:not([data-app="home"]) .tab[aria-selected="true"],
body:not([data-app="home"]) .game-toggle-btn.is-active,
body:not([data-app="home"]) .tier-btn.active,
body:not([data-app="home"]) .gameplan-subtab[aria-selected="true"]{
  background-image:none!important;
  background-color:var(--bl-surface-active-solid)!important;
}

/* Sliders: remove browser blue/white defaults and use page-local solid colours. */
body[data-app] input[type="range"]{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:100%!important;
  height:24px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  background-image:none!important;
  color:var(--bl-slider-thumb-solid)!important;
  accent-color:var(--bl-slider-thumb-solid)!important;
  cursor:pointer!important;
}
body[data-app] input[type="range"]::-webkit-slider-runnable-track{
  height:12px!important;
  border-radius:999px!important;
  background:var(--bl-slider-track-solid)!important;
  border:1px solid var(--bl-slider-border-solid)!important;
  box-shadow:none!important;
}
body[data-app] input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:24px!important;
  height:24px!important;
  margin-top:-7px!important;
  border-radius:50%!important;
  border:2px solid var(--bl-slider-border-solid)!important;
  background:var(--bl-slider-thumb-solid)!important;
  box-shadow:none!important;
}
body[data-app] input[type="range"]::-moz-range-track{
  height:12px!important;
  border-radius:999px!important;
  background:var(--bl-slider-track-solid)!important;
  border:1px solid var(--bl-slider-border-solid)!important;
  box-shadow:none!important;
}
body[data-app] input[type="range"]::-moz-range-thumb{
  width:24px!important;
  height:24px!important;
  border-radius:50%!important;
  border:2px solid var(--bl-slider-border-solid)!important;
  background:var(--bl-slider-thumb-solid)!important;
  box-shadow:none!important;
}
body[data-app] input[type="range"]::-moz-range-progress{
  height:12px!important;
  border-radius:999px!important;
  background:var(--bl-surface-active-solid)!important;
}
body[data-app] input::placeholder,
body[data-app] textarea::placeholder{
  color:color-mix(in srgb, var(--ink,var(--bl-surface-ink,#111)) 70%, transparent)!important;
  -webkit-text-fill-color:color-mix(in srgb, var(--ink,var(--bl-surface-ink,#111)) 70%, transparent)!important;
  opacity:1!important;
}
body[data-app] input:-webkit-autofill,
body[data-app] input:-webkit-autofill:hover,
body[data-app] input:-webkit-autofill:focus,
body[data-app] textarea:-webkit-autofill,
body[data-app] select:-webkit-autofill{
  -webkit-text-fill-color:var(--ink,var(--bl-surface-ink,#111))!important;
  box-shadow:0 0 0 1000px var(--bl-surface-input-solid) inset!important;
  transition:background-color 99999s ease-out 0s!important;
}
/* END BASELINE-SOLID-SURFACE-CONTRACT-20260527 */



/* --------------------------------------------------------------------------
   BASELINE-RECIPE-NAMED-URLS-AND-COMPACT-OPTIONS-20260527
   - Keeps the existing card design intact.
   - Removes the darker editable-options slab.
   - Starts recipe edit controls/sliders collapsed.
   - Print shows summary + recipe content only.
   -------------------------------------------------------------------------- */
.recipe-option-strip{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin:10px 0 12px 0;
}
.recipe-variant-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:min(260px, 100%);
  flex:0 1 320px;
}
.recipe-variant-field .label{
  font-size:16px;
  font-weight:900;
  color:var(--ink);
}
.recipe-variant-select,
.recipe-options-toggle{
  min-height:42px;
  border-radius:999px;
  border:1px solid var(--showall-border, var(--border, rgba(0,0,0,.18)));
  background:var(--showall-bg, rgba(255,255,255,.20));
  color:var(--ink);
  font-weight:900;
  padding:9px 14px;
}
.recipe-options-toggle{
  cursor:pointer;
  flex:0 0 auto;
}
.recipe-options-toggle:hover{ filter:brightness(1.03); }
.recipe-edit-options[hidden]{ display:none !important; }
.recipe-edit-options{
  margin:0 0 12px 0;
  padding:0;
  border:0;
  background:transparent !important;
  box-shadow:none !important;
}
#recipes .recipe-edit-options .recipe-controls,
#recipes .recipe-edit-options .multiplier.recipe-controls,
#recipes .recipe-page .recipe-controls,
#recipes .recipe-page .scale-block,
#recipes .recipe-page .scale-tools,
#recipes .recipe-page .variant-switcher,
#recipes .recipe-page .glide-controller{
  background:transparent !important;
  background-image:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
}
#recipes .recipe-page .recipe-controls,
#recipes .recipe-page .scale-block,
#recipes .recipe-page .glide-controller{
  border-color:color-mix(in srgb, var(--border, rgba(0,0,0,.18)) 72%, transparent) !important;
}
#recipes .recipe-page .variant-heading,
#recipes .recipe-page .recipe-native-variant-switcher{
  display:none !important;
}
#recipes .recipe-page:not(.recipe-options-open) .glide-controller{
  display:none !important;
}
#recipes .recipe-page.recipe-options-open .glide-controller{
  display:grid;
}
#recipes .recipe-page.recipe-options-open .glide-controller.glide-controller--paired{
  display:grid;
}
#recipes .recipe-page .glide-control-explainer{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
.print-summary{
  display:block;
  margin:8px 0 10px 0;
  font-size:1em;
  color:var(--ink);
}
@media (max-width:720px){
  .recipe-option-strip{ align-items:stretch; }
  .recipe-variant-field,
  .recipe-options-toggle{ flex:1 1 100%; width:100%; }
}
@media print{
  .recipe-option-strip,
  .recipe-edit-options,
  .recipe-native-variant-switcher,
  .variant-switcher,
  .variant-heading,
  .glide-controller,
  .slider-save-row,
  .recipe-controls,
  .multiplier,
  .scale-block,
  .scale-tools,
  .scale-toggle,
  .scale-apply,
  .back-btn,
  .print-btn,
  .recipe-actions,
  #recipes button,
  #recipes select,
  #recipes input[type="range"]{
    display:none !important;
  }
  .print-summary{
    display:block !important;
  }
}

/* ========================================================================== 
   BASELINE-RECIPE-CONTRACT-REPAIR-20260527
   Narrow repair: recipe options start collapsed, native/enhanced variant
   dropdowns are themed, controls align, outer recipe wrapper is removed,
   print excludes all editable/slider/explainer UI.
   ========================================================================== */

/* Remove the unnecessary outer Recipes card chrome; let overview/recipe cards use the space. */
body[data-app] #recipes > .grid > .card{
  background:transparent !important;
  background-image:none !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;
}
body[data-app] #recipes > .grid > .card::before,
body[data-app] #recipes > .grid > .card::after{ content:none !important; display:none !important; }
body[data-app] #recipes > .grid > .card > h2{ display:none !important; }
body[data-app] #recipes .recipe-main{ width:100% !important; min-width:0 !important; }
body[data-app] #recipes #recipes-landing.card{ width:100% !important; margin:0 !important; }
body[data-app] #recipes.recipe-open-mode #recipes-landing,
body[data-app] #recipes.recipe-detail-open #recipes-landing{ display:none !important; }
body[data-app] #recipes.recipe-open-mode .recipes,
body[data-app] #recipes.recipe-detail-open .recipes{ width:100% !important; display:grid !important; grid-template-columns:1fr !important; }
body[data-app] #recipes.recipe-open-mode .recipe-page.active,
body[data-app] #recipes.recipe-detail-open .recipe-page.is-open{ width:100% !important; max-width:none !important; justify-self:stretch !important; }

/* Stable summary: it may update while sliders move, but it must not shake the layout. */
body[data-app] #recipes .recipe-page > .print-summary,
body[data-app] #recipes .recipe-page .print-summary{
  display:block !important;
  min-height:3.2em !important;
  margin:10px 0 12px 0 !important;
  line-height:1.45 !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  color:var(--ink, #111) !important;
}

/* Variant + Edit Options strip. Native fallback and enhanced select both use the page/card palette. */
body[data-app] #recipes .recipe-option-strip{
  position:relative !important;
  z-index:30 !important;
  display:flex !important;
  align-items:end !important;
  gap:14px !important;
  flex-wrap:wrap !important;
  margin:8px 0 14px 0 !important;
  overflow:visible !important;
}
body[data-app] #recipes .recipe-variant-field{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  flex:0 1 360px !important;
  min-width:min(320px, 100%) !important;
  max-width:520px !important;
}
body[data-app] #recipes .recipe-variant-field > .label{
  font-size:16px !important;
  font-weight:900 !important;
  color:var(--ink, #111) !important;
}
body[data-app] #recipes .recipe-variant-field .bl-select,
body[data-app] #recipes .recipe-variant-field select.recipe-variant-select{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:46px !important;
}
html body[data-app] #recipes .recipe-variant-field select.recipe-variant-select,
html body[data-app] #recipes .recipe-variant-field .bl-select-btn,
html body[data-app] #recipes .recipe-options-toggle{
  min-height:46px !important;
  border-radius:999px !important;
  border:1px solid var(--showall-border, var(--border, rgba(0,0,0,.18))) !important;
  background:var(--showall-bg, var(--card-bg, rgba(255,255,255,.22))) !important;
  background-image:var(--showall-bg, var(--card-bg, none)) !important;
  color:var(--ink, #111) !important;
  -webkit-text-fill-color:currentColor !important;
  font:inherit !important;
  font-weight:900 !important;
  line-height:1.1 !important;
  padding:10px 16px !important;
  box-shadow:0 10px 22px -20px rgba(35,23,19,.28) !important;
}
html body[data-app] #recipes .recipe-variant-field select.recipe-variant-select{
  appearance:auto !important;
  -webkit-appearance:auto !important;
}
html body[data-app] #recipes .recipe-variant-field .bl-select-menu{
  z-index:90000 !important;
  background:var(--showall-bg, var(--card-bg, rgba(255,255,255,.94))) !important;
  background-image:var(--showall-bg, var(--card-bg, none)) !important;
  color:var(--ink, #111) !important;
  border-color:var(--showall-border, var(--border, rgba(0,0,0,.18))) !important;
}
html body[data-app] #recipes .recipe-variant-field .bl-select-menu [role="option"]{
  color:var(--ink, #111) !important;
  -webkit-text-fill-color:currentColor !important;
}
body[data-app] #recipes .recipe-options-toggle{
  flex:0 0 auto !important;
  cursor:pointer !important;
  align-self:end !important;
}

/* Collapse contract: no editable controls or sliders visible until Edit Options is opened. */
body[data-app] #recipes .recipe-page:not(.recipe-options-open) .recipe-edit-options,
body[data-app] #recipes .recipe-page:not(.recipe-options-open) > .multiplier.recipe-controls,
body[data-app] #recipes .recipe-page:not(.recipe-options-open) > .recipe-controls,
body[data-app] #recipes .recipe-page:not(.recipe-options-open) .scale-block,
body[data-app] #recipes .recipe-page:not(.recipe-options-open) .scale-tools,
body[data-app] #recipes .recipe-page:not(.recipe-options-open) .glide-controller{
  display:none !important;
}
body[data-app] #recipes .recipe-page.recipe-options-open .recipe-edit-options{
  display:block !important;
  margin:0 0 14px 0 !important;
  padding:0 !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}
body[data-app] #recipes .recipe-page.recipe-options-open .recipe-edit-options > .multiplier.recipe-controls,
body[data-app] #recipes .recipe-page.recipe-options-open .recipe-edit-options > .recipe-controls{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
  align-items:stretch !important;
  width:100% !important;
  padding:0 !important;
  margin:0 0 14px 0 !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row{
  display:grid !important;
  grid-template-columns:minmax(150px, 0.22fr) minmax(220px, 0.42fr) auto !important;
  gap:10px !important;
  align-items:center !important;
  width:100% !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .label{
  white-space:nowrap !important;
  margin:0 !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .bl-number,
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .bl-select,
body[data-app] #recipes .recipe-edit-options .recipe-control-row > select,
body[data-app] #recipes .recipe-edit-options .recipe-control-row > input{
  width:100% !important;
  max-width:360px !important;
  min-width:0 !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row--scale,
body[data-app] #recipes .recipe-edit-options .scale-block{
  display:block !important;
  width:100% !important;
}
body[data-app] #recipes .recipe-edit-options .scale-tools{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:center !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
body[data-app] #recipes .recipe-edit-options .scale-block:not(.is-open) .scale-tools{ display:none !important; }

/* Slider/overall-feel layout: equal columns, no darker slab. */
html body[data-app] #recipes .recipe-page.recipe-options-open .glide-controller,
html body[data-app] #recipes .recipe-page.recipe-options-open .glide-controller.glide-controller--paired{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
  gap:18px !important;
  align-items:start !important;
  width:100% !important;
  padding:14px 0 !important;
  margin:10px 0 16px 0 !important;
  border-top:1px solid color-mix(in srgb, var(--border, rgba(0,0,0,.18)) 72%, transparent) !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-left:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
html body[data-app] #recipes .glide-controller--paired .glide-control-stack{ min-width:0 !important; }
html body[data-app] #recipes .glide-control-explainer{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
@media (max-width:900px){
  html body[data-app] #recipes .recipe-page.recipe-options-open .glide-controller,
  html body[data-app] #recipes .recipe-page.recipe-options-open .glide-controller.glide-controller--paired,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row{
    grid-template-columns:1fr !important;
  }
}

/* Ingredient Library coherence: remove pale standalone filter slab; keep controls readable. */
body[data-app] #ingredients .filter-bar{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  border-color:color-mix(in srgb, var(--border, rgba(0,0,0,.18)) 72%, transparent) !important;
}
html body[data-app] #ingredients .filter-bar select,
html body[data-app] #ingredients .filter-bar .bl-select-btn,
html body[data-app] #ingredients .filter-bar .clear,
html body[data-app] #ingredients .ingredient-recipe-link a{
  background:var(--showall-bg, var(--card-bg, rgba(255,255,255,.18))) !important;
  background-image:var(--showall-bg, var(--card-bg, none)) !important;
  color:var(--ink, #111) !important;
  -webkit-text-fill-color:currentColor !important;
  border-color:var(--showall-border, var(--border, rgba(0,0,0,.18))) !important;
}

/* Print contract: the printed recipe is content + compact summary only, no editable/slider/explainer UI. */
@media print{
  body.printing-recipe #recipes .recipe-option-strip,
  body.printing-recipe #recipes .recipe-edit-options,
  body.printing-recipe #recipes .recipe-native-variant-switcher,
  body.printing-recipe #recipes .variant-switcher,
  body.printing-recipe #recipes .variant-heading,
  body.printing-recipe #recipes .glide-controller,
  body.printing-recipe #recipes .glide-control-main,
  body.printing-recipe #recipes .glide-control-explainer,
  body.printing-recipe #recipes .glide-slider-head,
  body.printing-recipe #recipes .glide-slider-wrap,
  body.printing-recipe #recipes .glide-scale,
  body.printing-recipe #recipes .glide-explain,
  body.printing-recipe #recipes .glide-breakdown,
  body.printing-recipe #recipes .slider-save-row,
  body.printing-recipe #recipes .recipe-controls,
  body.printing-recipe #recipes .multiplier,
  body.printing-recipe #recipes .scale-block,
  body.printing-recipe #recipes .scale-tools,
  body.printing-recipe #recipes .scale-toggle,
  body.printing-recipe #recipes .scale-apply,
  body.printing-recipe #recipes .back-btn,
  body.printing-recipe #recipes .print-btn,
  body.printing-recipe #recipes .recipe-actions,
  body.printing-recipe #recipes a.info-link,
  body.printing-recipe #recipes .variant-panel > p.note:first-child{
    display:none !important;
  }
  body.printing-recipe #recipes > .grid > .card,
  body.printing-recipe #recipes > .grid,
  body.printing-recipe #recipes .recipe-main{
    display:block !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 !important;
  }
  body.printing-recipe #recipes .print-summary{
    display:block !important;
    min-height:0 !important;
    margin:0 0 10px 0 !important;
    padding:0 0 8px 0 !important;
    border-bottom:1px dotted rgba(0,0,0,.28) !important;
  }
}

/* --------------------------------------------------------------------------
   BASELINE-RECIPE-OPTIONS-ACTUAL-FIX-20260527
   Compact variant selector + options alignment repair.
   -------------------------------------------------------------------------- */
body[data-app] #recipes .recipe-option-strip{
  position:relative !important;
  z-index:30 !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  margin:6px 0 12px 0 !important;
  overflow:visible !important;
}
body[data-app] #recipes .recipe-variant-field{
  position:relative !important;
  display:block !important;
  flex:0 0 320px !important;
  width:320px !important;
  min-width:0 !important;
  max-width:min(320px, 100%) !important;
  margin:0 !important;
  padding:0 !important;
}
body[data-app] #recipes .recipe-variant-field::before{
  content:'Variant:' !important;
  position:absolute !important;
  left:12px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:2 !important;
  pointer-events:none !important;
  color:var(--accent-2, var(--ink, #111)) !important;
  -webkit-text-fill-color:currentColor !important;
  font-family:inherit !important;
  font-size:16px !important;
  font-weight:850 !important;
  line-height:1 !important;
}
body[data-app] #recipes .recipe-variant-field > .label,
body[data-app] #recipes .recipe-option-strip > .recipe-variant-field > span.label{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
}
html body[data-app] #recipes .recipe-variant-field select.recipe-variant-select{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:40px !important;
  min-height:40px !important;
  margin:0 !important;
  padding:7px 34px 7px 88px !important;
  box-sizing:border-box !important;
  border-radius:999px !important;
  border:1px solid var(--showall-border, var(--border, rgba(0,0,0,.18))) !important;
  background:var(--showall-bg, rgba(255,255,255,.22)) !important;
  background-image:var(--showall-bg, none) !important;
  color:var(--accent-2, var(--ink, #111)) !important;
  -webkit-text-fill-color:currentColor !important;
  font-family:inherit !important;
  font-size:16px !important;
  font-weight:850 !important;
  line-height:1.15 !important;
  letter-spacing:normal !important;
  box-shadow:0 10px 22px rgba(0,0,0,0.12) !important;
  appearance:auto !important;
  -webkit-appearance:auto !important;
}
html body[data-app] #recipes .recipe-options-toggle,
html body[data-app] #recipes .recipe-edit-options .reset,
html body[data-app] #recipes .recipe-edit-options .apply,
html body[data-app] #recipes .recipe-edit-options .scale-toggle,
html body[data-app] #recipes .recipe-edit-options .scale-apply{
  min-height:40px !important;
  height:40px !important;
  width:auto !important;
  max-width:max-content !important;
  border-radius:999px !important;
  border:1px solid var(--showall-border, var(--border, rgba(0,0,0,.18))) !important;
  background:var(--showall-bg, rgba(255,255,255,.22)) !important;
  background-image:var(--showall-bg, none) !important;
  color:var(--accent-2, var(--ink, #111)) !important;
  -webkit-text-fill-color:currentColor !important;
  font-family:inherit !important;
  font-size:16px !important;
  font-weight:850 !important;
  line-height:1.15 !important;
  padding:7px 12px !important;
  box-shadow:0 10px 22px rgba(0,0,0,0.12) !important;
  box-sizing:border-box !important;
  align-self:center !important;
  cursor:pointer !important;
}
html body[data-app] #recipes .recipe-edit-options .reset{
  color:#9b2f22 !important;
  -webkit-text-fill-color:#9b2f22 !important;
}
body[data-app] #recipes .recipe-edit-options[hidden]{
  display:none !important;
}
body[data-app] #recipes .recipe-page.recipe-options-open .recipe-edit-options{
  display:block !important;
  width:100% !important;
  margin:0 0 14px 0 !important;
  padding:0 !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}
body[data-app] #recipes .recipe-page.recipe-options-open .recipe-edit-options > .multiplier.recipe-controls,
body[data-app] #recipes .recipe-page.recipe-options-open .recipe-edit-options > .recipe-controls{
  display:grid !important;
  grid-template-columns:1fr !important;
  width:100% !important;
  max-width:100% !important;
  gap:12px !important;
  padding:0 !important;
  margin:0 0 14px 0 !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row{
  --recipe-edit-label-col:220px;
  --recipe-edit-field-col:300px;
  display:grid !important;
  grid-template-columns:var(--recipe-edit-label-col) var(--recipe-edit-field-col) max-content !important;
  justify-content:start !important;
  align-items:center !important;
  column-gap:12px !important;
  row-gap:8px !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .label{
  grid-column:1 !important;
  margin:0 !important;
  white-space:nowrap !important;
  justify-self:start !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .bl-number,
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .bl-select,
body[data-app] #recipes .recipe-edit-options .recipe-control-row > select,
body[data-app] #recipes .recipe-edit-options .recipe-control-row > input,
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .oat-toggle{
  grid-column:2 !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  justify-self:start !important;
  box-sizing:border-box !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .reset,
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .apply{
  grid-column:3 !important;
  justify-self:start !important;
  margin:0 !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row--scale,
body[data-app] #recipes .recipe-edit-options .scale-block{
  display:block !important;
  width:100% !important;
  margin:0 !important;
}
body[data-app] #recipes .recipe-edit-options .scale-tools{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:10px !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
body[data-app] #recipes .recipe-edit-options .scale-block:not(.is-open) .scale-tools{
  display:none !important;
}
@media (max-width:720px){
  body[data-app] #recipes .recipe-option-strip{
    align-items:stretch !important;
  }
  body[data-app] #recipes .recipe-variant-field,
  body[data-app] #recipes .recipe-options-toggle{
    width:100% !important;
    max-width:100% !important;
    flex:1 1 100% !important;
  }
  body[data-app] #recipes .recipe-edit-options .recipe-control-row{
    grid-template-columns:1fr !important;
  }
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > .label,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > .bl-number,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > .bl-select,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > select,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > input,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > .oat-toggle,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > .reset,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > .apply{
    grid-column:1 !important;
    width:100% !important;
    max-width:100% !important;
  }
}


/* --------------------------------------------------------------------------
   BASELINE-SITEWIDE-RECIPE-TEMPLATE-RULE-20260527B
   Final sitewide recipe options rule.
   - One native compact variant chooser only; no pseudo-label, no enhanced clone.
   - Initial chooser text is "Select Variant".
   - Top row order is Variant | Edit/Hide Options | Reset.
   - Expanded controls align as label | field; Reset is no longer inside the panel.
   -------------------------------------------------------------------------- */
body[data-app] #recipes .recipe-option-strip{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  width:100% !important;
  margin:6px 0 14px 0 !important;
  padding:0 !important;
  overflow:visible !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}
body[data-app] #recipes .recipe-variant-field{
  position:relative !important;
  display:block !important;
  flex:0 1 320px !important;
  width:320px !important;
  min-width:220px !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
}
body[data-app] #recipes .recipe-variant-field::before,
body[data-app] #recipes .recipe-variant-field::after{
  content:none !important;
  display:none !important;
}
body[data-app] #recipes .recipe-variant-field > .label,
body[data-app] #recipes .recipe-option-strip > .recipe-variant-field > span.label{
  display:none !important;
}
html body[data-app] #recipes .recipe-variant-field select.recipe-variant-select{
  display:block !important;
  position:static !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:40px !important;
  min-height:40px !important;
  margin:0 !important;
  padding:7px 34px 7px 14px !important;
  box-sizing:border-box !important;
  border-radius:999px !important;
  border:1px solid var(--showall-border, var(--border, rgba(0,0,0,.18))) !important;
  background:var(--showall-bg, rgba(255,255,255,.22)) !important;
  background-image:var(--showall-bg, none) !important;
  color:var(--accent-2, var(--ink, #111)) !important;
  -webkit-text-fill-color:currentColor !important;
  font-family:inherit !important;
  font-size:16px !important;
  font-weight:850 !important;
  line-height:1.15 !important;
  letter-spacing:normal !important;
  text-shadow:none !important;
  box-shadow:0 10px 22px rgba(0,0,0,0.12) !important;
  opacity:1 !important;
  appearance:auto !important;
  -webkit-appearance:auto !important;
  transform:none !important;
}
html body[data-app] #recipes .recipe-variant-field select.recipe-variant-select option{
  color:var(--ink, #111) !important;
  background:var(--bl-surface-panel-solid, var(--bl-surface-card-solid, #fff)) !important;
}
html body[data-app] #recipes .recipe-options-toggle,
html body[data-app] #recipes .recipe-option-strip > .recipe-top-reset{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  min-height:40px !important;
  height:40px !important;
  width:auto !important;
  max-width:max-content !important;
  margin:0 !important;
  padding:7px 14px !important;
  box-sizing:border-box !important;
  border-radius:999px !important;
  border:1px solid var(--showall-border, var(--border, rgba(0,0,0,.18))) !important;
  background:var(--showall-bg, rgba(255,255,255,.22)) !important;
  background-image:var(--showall-bg, none) !important;
  color:var(--accent-2, var(--ink, #111)) !important;
  -webkit-text-fill-color:currentColor !important;
  font-family:inherit !important;
  font-size:16px !important;
  font-weight:850 !important;
  line-height:1.15 !important;
  text-shadow:none !important;
  box-shadow:0 10px 22px rgba(0,0,0,0.12) !important;
  cursor:pointer !important;
}
html body[data-app] #recipes .recipe-option-strip > .recipe-top-reset{
  color:#9b2f22 !important;
  -webkit-text-fill-color:#9b2f22 !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-top-reset{
  display:none !important;
}
body[data-app] #recipes .recipe-page.recipe-options-open .recipe-edit-options{
  display:block !important;
  width:100% !important;
  margin:0 0 14px 0 !important;
  padding:0 !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}
body[data-app] #recipes .recipe-page.recipe-options-open .recipe-edit-options > .multiplier.recipe-controls,
body[data-app] #recipes .recipe-page.recipe-options-open .recipe-edit-options > .recipe-controls{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 0 14px 0 !important;
  padding:0 !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row{
  --recipe-edit-label-col:220px;
  --recipe-edit-field-col:300px;
  display:grid !important;
  grid-template-columns:var(--recipe-edit-label-col) var(--recipe-edit-field-col) !important;
  justify-content:start !important;
  align-items:center !important;
  column-gap:12px !important;
  row-gap:8px !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .label{
  grid-column:1 !important;
  margin:0 !important;
  white-space:nowrap !important;
  justify-self:start !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .bl-number,
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .bl-select,
body[data-app] #recipes .recipe-edit-options .recipe-control-row > select,
body[data-app] #recipes .recipe-edit-options .recipe-control-row > input,
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .oat-toggle{
  grid-column:2 !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  justify-self:start !important;
  box-sizing:border-box !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .reset,
body[data-app] #recipes .recipe-edit-options .recipe-control-row > .apply{
  display:none !important;
}
body[data-app] #recipes .recipe-edit-options .recipe-control-row--scale,
body[data-app] #recipes .recipe-edit-options .scale-block{
  display:block !important;
  width:100% !important;
  margin:0 !important;
}
body[data-app] #recipes .recipe-edit-options .scale-tools{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:10px !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
body[data-app] #recipes .recipe-edit-options .scale-block:not(.is-open) .scale-tools{
  display:none !important;
}
@media (max-width:720px){
  body[data-app] #recipes .recipe-option-strip{
    align-items:stretch !important;
  }
  body[data-app] #recipes .recipe-variant-field,
  body[data-app] #recipes .recipe-options-toggle,
  body[data-app] #recipes .recipe-option-strip > .recipe-top-reset{
    width:100% !important;
    max-width:100% !important;
    flex:1 1 100% !important;
  }
  body[data-app] #recipes .recipe-edit-options .recipe-control-row{
    grid-template-columns:1fr !important;
  }
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > .label,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > .bl-number,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > .bl-select,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > select,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > input,
  body[data-app] #recipes .recipe-edit-options .recipe-control-row > .oat-toggle{
    grid-column:1 !important;
    width:100% !important;
    max-width:100% !important;
  }
}


/* --------------------------------------------------------------------------
   BASELINE-QUICK-POLISH-20260527C
   - Recipe ingredient info link is inline beside Ingredients as (View).
   - Dropdown menus are fully opaque overlays and consume pointer events.
   -------------------------------------------------------------------------- */
body[data-app] #recipes .recipe-ingredients-heading{
  display:flex !important;
  align-items:baseline !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}
body[data-app] #recipes .recipe-ingredients-heading .recipe-info-view-link{
  display:inline-flex !important;
  align-items:center !important;
  margin:0 !important;
  padding:3px 9px !important;
  border-radius:999px !important;
  border:1px solid var(--showall-border, var(--border, rgba(0,0,0,.18))) !important;
  background:var(--showall-bg, var(--bl-surface-control-solid, rgba(255,255,255,.22))) !important;
  background-image:var(--showall-bg, none) !important;
  color:var(--accent-2, var(--ink, #111)) !important;
  -webkit-text-fill-color:currentColor !important;
  font-family:inherit !important;
  font-size:.74em !important;
  font-weight:850 !important;
  line-height:1.15 !important;
  text-decoration:none !important;
  box-shadow:0 8px 18px -18px rgba(35,23,19,.35) !important;
}
body[data-app] #recipes .recipe-page > .info-link:not(.recipe-info-view-link){
  display:none !important;
}
html body .bl-select{
  position:relative !important;
  z-index:80 !important;
}
html body .bl-select[data-bl-enhanced="1"] .bl-select-menu,
html body .bl-select-menu{
  position:absolute !important;
  z-index:2147483000 !important;
  pointer-events:auto !important;
  isolation:isolate !important;
  opacity:1 !important;
  background:var(--bl-surface-panel-solid, var(--card-bg, #fff)) !important;
  background-image:none !important;
  color:var(--ink, var(--bl-surface-ink, #111)) !important;
  border:1px solid var(--border-2, var(--border, rgba(0,0,0,.22))) !important;
  box-shadow:0 18px 42px -24px rgba(0,0,0,.45) !important;
}
html body .bl-select-menu::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  border-radius:inherit !important;
  background:var(--bl-surface-panel-solid, var(--card-bg, #fff)) !important;
  pointer-events:auto !important;
}
html body .bl-select-menu [role="option"],
html body .bl-select-menu button[role="option"]{
  pointer-events:auto !important;
  background:var(--bl-surface-control-solid, var(--bl-surface-panel-solid, #fff)) !important;
  background-image:none !important;
  color:var(--ink, var(--bl-surface-ink, #111)) !important;
  -webkit-text-fill-color:currentColor !important;
}
html body select option{
  background:var(--bl-surface-panel-solid, var(--card-bg, #fff)) !important;
  color:var(--ink, var(--bl-surface-ink, #111)) !important;
}
@media print{
  body[data-app] #recipes .recipe-info-view-link,
  body[data-app] #recipes .recipe-ingredients-heading .recipe-info-view-link{
    display:none !important;
  }
}

/* --------------------------------------------------------------------------
   BASELINE-URGENT-TAB-FIX-20260527
   - Keep Ingredient Library filter controls inline with no pale slab.
   - Show all sits immediately after the dropdown.
   -------------------------------------------------------------------------- */
body[data-app] #ingredients .filter-bar{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-start !important;
  align-items:center !important;
  gap:8px !important;
  width:auto !important;
  max-width:none !important;
  margin:10px 0 14px 0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
body[data-app] #ingredients .filter-bar label{
  margin-right:2px !important;
}
body[data-app] #ingredients .filter-bar .bl-select,
body[data-app] #ingredients .filter-bar select{
  flex:0 1 auto !important;
  width:auto !important;
  min-width:240px !important;
  max-width:min(420px, 100%) !important;
}
body[data-app] #ingredients .filter-bar .clear{
  margin-left:0 !important;
  flex:0 0 auto !important;
}
@media (max-width:640px){
  body[data-app] #ingredients .filter-bar{
    align-items:stretch !important;
  }
  body[data-app] #ingredients .filter-bar label{
    width:100% !important;
  }
  body[data-app] #ingredients .filter-bar .bl-select,
  body[data-app] #ingredients .filter-bar select{
    min-width:0 !important;
    width:calc(100% - 96px) !important;
  }
}


/* BASELINE-FOOD-RECIPE-WARM-YELLOW-RESTORE-20260527foodlinkwarmfix
   Food recipe cards return to the warm yellow/orange recipe surface. */
body[data-app="food"] #recipes .card,
body[data-app="food"] #recipes .recipe.card,
body[data-app="food"] #recipes-landing.card,
body[data-app="food"] #recipes .recipe-page{
  background-image:linear-gradient(180deg,#ffd26a 0%,#ffb000 56%,#f08a24 100%)!important;
  background-color:#ffb000!important;
}

/* BASELINE-DROPDOWN-OPAQUE-CLICK-GUARD-20260527foodlinkwarmfix */
.bl-select{ position:relative; z-index:30; }
.bl-select:has(.bl-select-menu:not([hidden])){ z-index:9999; }
.bl-select-menu{
  background-image:none!important;
  background-color:var(--bl-surface-panel-solid,var(--filter-bg,var(--card-bg,#fff)))!important;
  opacity:1!important;
  pointer-events:auto!important;
  z-index:10000!important;
  box-shadow:0 18px 34px -22px rgba(0,0,0,.42)!important;
}
.bl-select-menu [role="option"]{ pointer-events:auto!important; }


/* BASELINE-URGENT-FOOD-RECIPE-SOLID-20260527
   Food recipe surfaces must be one solid warm yellow-orange, not a gradient. */
body[data-app="food"] #recipes .card,
body[data-app="food"] #recipes .recipe.card,
body[data-app="food"] #recipes-landing.card,
body[data-app="food"] #recipes .recipe-page{
  background-image:none!important;
  background-color:#f4a51c!important;
}
body[data-app="food"] #recipes .card::before,
body[data-app="food"] #recipes .card::after,
body[data-app="food"] #recipes .recipe.card::before,
body[data-app="food"] #recipes .recipe.card::after{
  background:none!important;
}