/* ==========================================================================
   Baseline Recipes UI
   - Recipe card layout (grid + print button)
   - Multiplier + Measurement type 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; }

/* 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; }