/* Recipe UI ownership: Controls. Responsive rules stay with this owner. */

/* Shared native disclosure chevron. */
.recipe-disclosure > summary { list-style: none; display: flex; align-items: center; gap: 0.5rem; }
.recipe-disclosure > summary::-webkit-details-marker { display: none; }
.recipe-disclosure > summary::before {
  content: ""; width: 0.45rem; height: 0.45rem; flex: 0 0 0.45rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); margin: 0 0.25rem;
}
.recipe-disclosure[open] > summary::before { transform: rotate(45deg); }

.form-grid { display: grid; gap: 0.75rem; }

.form-grid .field { display: flex; flex-direction: column; gap: 0.2rem; }

.form-grid label,
.form-grid .field-label {
  font-weight: 600;
  font-size: var(--recipe-font-working);
  font-family: var(--font-sans);
}

.inline-pair { display: flex; gap: 0.75rem; flex-wrap: nowrap; align-items: flex-start; }

.inline-pair .field { flex: 0 0 5rem; max-width: 5rem; }

.inline-pair .field label { white-space: normal; font-size: var(--recipe-font-control); line-height: 1.1; }

.inline-pair input[name$="-prep_time_mins"], .inline-pair input[name$="-cook_time_mins"], .inline-pair input[name$="-total_time_mins"], .inline-pair input[name$="-recipe_yield_display"] { width: 4rem; }

.inline-pair.wide-fields { flex-wrap: wrap; }

.inline-pair.wide-fields .field { flex: 1 1 180px; max-width: none; }

.inline-pair.date-row { align-items: flex-start; gap: 0.85rem; }

.inline-pair.date-row .field { min-width: 0; }

.inline-pair.date-row input[type="date"] {
  min-height: 42px;
  padding: 0.5rem 0.65rem;
  border: 1.5px solid var(--line);
  border-radius: var(--recipe-radius-large);
  font-size: var(--recipe-font-working);
  background: var(--recipe-surface);
  color: var(--ink);
  width: 100%;
}

.inline-pair.date-row input[type="date"]:focus {
  border-color: var(--ink);
  box-shadow: var(--recipe-shadow-focus);
}

.inline-pair.date-row input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.85;
  filter: sepia(14%) saturate(140%);
}

.field-with-help .label-row { display:flex; align-items:center; gap:0.35rem; }

.field-with-help .help-icon { margin-left:auto; }

.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: var(--recipe-radius-status);
  background: var(--gray-2);
  color: var(--ink);
  font-size: var(--recipe-font-metadata);
  font-weight: 700;
  cursor: help;
  position: relative;
}

.help-icon::before { content: "i"; }

.help-icon::after { content: attr(data-help); position: absolute; top: 50%; left: calc(100% + 8px); transform: translateY(-50%); background: var(--ink); color: var(--paper); padding: 0.35rem 0.5rem; border-radius: var(--recipe-radius-medium); border: 1px solid var(--ink-2); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms ease; z-index: 20; box-shadow: var(--recipe-shadow-overlay); }

.help-icon:hover::after { opacity: 1; }

.btn-reset,
.btn-create {
display: inline-block;
color: var(--recipe-surface);
padding: 0.65rem 1.25rem;
font-weight: 700;
font-family: var(--font-sans);
cursor: pointer;
text-decoration: none;
transition: all 200ms ease;
background: var(--recipe-accent);
border: 1px solid var(--recipe-accent);
border-radius: var(--recipe-radius-small);
font-size: var(--recipe-font-control);
box-shadow: none;
min-height: var(--recipe-control-default);
}

.btn-reset:hover,
.btn-create:hover {
background: var(--recipe-accent-strong);
box-shadow: none;
}

.btn-dashed {
  width: 100%;
  border-style: dashed;
}

.btn-dashed::before {
  display: none;
}

.btn-toolbar {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-toolbar.text-sm { font-size: var(--recipe-font-control); }

.btn-toolbar.text-xs { font-size: var(--recipe-font-metadata); }

.btn-add-text {
  margin-left: 0.5rem;
  font-weight: normal;
}

.btn-accent, .btn-buy, .btn-print {
  border-color: var(--ink);
}

.btn-accent:hover, .btn-buy:hover, .btn-print:hover {
  background: color-mix(in srgb, var(--recipe-ink) 3%, transparent);
  border-color: color-mix(in srgb, var(--recipe-ink) 28%, transparent);
  transform: translateY(-1px);
  box-shadow: var(--recipe-shadow-overlay);
}

.summary-quick-actions .btn-sm {
  padding: 0.3rem 0.55rem;
  font-size: var(--recipe-font-compact);
}

.action-buttons { display: flex; gap: 0.4rem; flex-wrap: wrap; }

input.server-error,
select.server-error,
textarea.server-error {
  border-color: var(--recipe-danger);
  box-shadow: var(--recipe-shadow-focus);
}

.btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border-radius: var(--recipe-radius-status);
  border: 2px solid color-mix(in srgb, var(--recipe-ink) 20%, transparent);
  border-top-color: var(--ink);
  animation: spin 0.8s linear infinite;
}

.btn-stack {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.btn-grid-compact { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }

.btn-xs { padding: 0.3rem 0.4rem; font-size: var(--recipe-font-compact); justify-content: center; }

#menu-recipe-search-form .menu-tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#menu-load-menu-form .menu-tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

textarea.auto-resize {
  overflow: hidden;
}

@media (min-width: 769px) and (max-width: 1100px) {
.btn-dashed {
    min-height: 44px;
    font-size: var(--recipe-font-working);
  }

.inline-pair.wide-fields .field {
    flex: 1 1 45%;
  }

.inline-pair.date-row {
    flex-wrap: wrap;
  }

.inline-pair.date-row .field {
    flex: 1 1 45%;
  }
}

@media (max-width: 768px) {
.btn-dashed {
    min-height: 48px;
    font-size: var(--recipe-font-body);
    width: 100%;
  }

.inline-pair.wide-fields .field {
    flex: 1 1 100%;
  }

.inline-pair.date-row {
    flex-wrap: wrap;
  }

.inline-pair.date-row .field {
    flex: 1 1 100%;
  }

.page-builder .btn-dashed {
    min-height: 40px;
    padding-block: 0.35rem;
  }
}
@media (max-width: 768px) {
  .recipe-app a.btn {
    min-height: var(--recipe-control-touch);
  }
}