/*
 * Copyright (c) 2026 by Gabriele Proietti Mattia <pm.gabriele@gmail.com>.
 *
 * All Rights Reserved.
 */

/*
 * The recipes (recipes.js): the list, a recipe, writing one and the values of an ingredient. The pieces
 * shared with the other tabs (pills, notes, steppers, choices, sub-pages, sheets, the dock) are in
 * kit.css; here is only what the recipes own, with the tokens of the design system and the few of
 * kit.css.
 */

/* ----------------------------------------------------------------------------- the list */

#recipes-root { display: flex; flex-direction: column; gap: var(--space-4); }

/* wide: the list, and the recipe next to it */
#recipes-root.recipes-wide { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }

.recipes-list, .recipes-detail { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }

.recipes-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.recipes-head__titles { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

/* the small round button of the header and of a recipe: "+ Nuova", "Modifica", "Copia" */
.recipes-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.recipes-pill svg { width: 18px; height: 18px; }
.recipes-pill--danger { color: var(--danger); }

/* every button of the recipes shows where the keyboard is */
.recipes-pill:focus-visible, .recipes-row:focus-visible, .recipes-credit:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.recipes-search, .recipes-find { position: relative; display: flex; align-items: center; gap: var(--space-2); }
.recipes-search svg, .recipes-find svg { position: absolute; left: var(--space-3); width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }
.recipes-search .input, .recipes-find .input { flex: 1 1 auto; min-width: 0; width: 100%; padding-left: 40px; }

/* the filters are one row that scrolls on a phone, and wrap in the narrow column of the wide page */
.recipes-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); }
.recipes-filters .kit-choice { flex: none; }
.recipes-wide .recipes-filters { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }

.recipes-results { display: flex; flex-direction: column; gap: var(--space-2); }

.recipes-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.recipes-row.is-selected { border-color: var(--accent); background: var(--accent-soft); }

.recipes-row__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.recipes-row__name { min-width: 0; font-weight: var(--fw-medium); overflow-wrap: break-word; }

.recipes-row__tag {
  flex: none;
  padding: 2px var(--space-2);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
}

.recipes-row__tag.is-mine { background: var(--accent-soft); border-color: var(--accent-soft-border); color: var(--accent); }
.recipes-wide .recipes-row__tag { padding: 0; border: 0; background: transparent; font-family: inherit; font-size: var(--fs-caption); }
.recipes-row__sub { font-size: var(--fs-caption); color: var(--text-muted); }
.recipes-row__warn { font-size: var(--fs-caption); color: var(--warn); }

.recipes-pieces { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-1); }

/* -------------------------------------------------------------------------- one recipe */

.recipes-detail__head { display: flex; flex-direction: column; gap: var(--space-1); }
.recipes-detail__sub { margin: 0; color: var(--text-muted); font-size: var(--fs-body-sm); }

.recipes-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.recipes-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: var(--border-hairline) solid var(--border);
  font-size: var(--fs-caption);
}

.recipes-chip svg { width: 16px; height: 16px; }

.recipes-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.recipes-actions:empty { display: none; }

.recipes-portions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-lg);
}

.recipes-portions__label { font-weight: var(--fw-medium); }

.recipes-nutri {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface);
  border: var(--border-hairline) solid var(--accent-soft-border);
  border-radius: var(--radius-lg);
}

.recipes-nutri__label { color: var(--text-muted); }
.recipes-nutri__none { font-weight: var(--fw-medium); }
.recipes-nutri__big { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.recipes-nutri__kcal { font-size: var(--fs-h1); font-weight: var(--fw-semibold); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.recipes-nutri__unit { color: var(--text-muted); font-size: var(--fs-body-sm); }

.recipes-macros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.recipes-macros--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recipes-macro { display: flex; flex-direction: column; gap: 2px; }
.recipes-macro__label { font-size: var(--fs-caption); color: var(--text-muted); }
.recipes-macro__value { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

/* the card of the dock: the macros as rows */
.recipes-nutri--dock .recipes-macros { grid-template-columns: minmax(0, 1fr); gap: 0; }
.recipes-nutri--dock .recipes-macro { flex-direction: row; align-items: center; justify-content: space-between; min-height: 40px; border-bottom: var(--border-hairline) solid var(--border-faint); }
.recipes-nutri--dock .recipes-macro:last-child { border-bottom: 0; }
.recipes-dock { display: flex; flex-direction: column; gap: var(--space-3); }

/* the ingredients that have no values: said, and one tap from adding them */
.recipes-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--warn-soft);
  color: var(--warn);
}

.recipes-nutri--dock .recipes-banner { padding: 0; background: transparent; }
.recipes-banner__text { flex: 1 1 90px; min-width: 0; }
.recipes-banner__go { border-color: var(--warn); color: var(--warn); }

.recipes-wide-btn { width: 100%; }
.recipes-title { margin: 0; }

.recipes-lines, .recipes-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-lg);
}

.recipes-line, .recipes-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--border-hairline) solid var(--border-faint);
}

.recipes-line:last-child, .recipes-step:last-child { border-bottom: 0; }
.recipes-line { justify-content: flex-start; }
.recipes-line .kit-pill { flex: none; margin-left: auto; white-space: nowrap; }
.recipes-line__text { min-width: 0; overflow-wrap: break-word; }
.recipes-line__qty { font-weight: var(--fw-semibold); }

.recipes-dot { flex: none; width: 8px; height: 8px; border-radius: var(--radius-circle); background: var(--border-strong); }
.recipes-dot--pantry { background: var(--success); }
.recipes-dot--buy { background: var(--warn); }

.recipes-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); font-size: var(--fs-caption); color: var(--text-muted); }
.recipes-legend__item { display: inline-flex; align-items: center; gap: var(--space-1); }

.recipes-step { flex-wrap: wrap; }
.recipes-step__n { flex: none; width: 24px; font-family: var(--font-mono); font-size: var(--fs-mono-label); color: var(--text-muted); }
.recipes-step__text { flex: 1 1 140px; min-width: 0; overflow-wrap: break-word; }
.recipes-step__chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.recipes-step__time { font-size: var(--fs-body-sm); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------- writing a recipe */

.recipes-area { width: 100%; min-height: 140px; padding: var(--space-3); line-height: var(--lh-body); resize: vertical; }

.recipes-parsed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.recipes-parsed:empty { display: none; }

.recipes-parsed__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  background: var(--surface);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-md);
}

.recipes-parsed__item.is-bad { border-color: var(--danger); background: var(--danger-soft); }
.recipes-parsed__qty { font-weight: var(--fw-semibold); color: var(--accent); }
.recipes-parsed__why { font-size: var(--fs-caption); color: var(--danger); }
.recipes-parsed__warn { display: inline-flex; align-items: center; font-size: var(--fs-caption); color: var(--warn); }
.recipes-parsed__link { color: var(--warn); font-size: var(--fs-caption); }

.recipes-stepcards { display: flex; flex-direction: column; gap: var(--space-3); }

.recipes-stepcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-lg);
}

.recipes-stepcard__top { display: flex; align-items: center; gap: var(--space-2); }
.recipes-stepcard__top .input { flex: 1 1 auto; min-width: 0; }
.recipes-stepcard__top .recipes-minutes { flex: none; width: 76px; }

/* ----------------------------------------------------------------- the values of an ingredient */

.recipes-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }

.recipes-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface); border: var(--border-hairline) solid var(--border); border-radius: var(--radius-lg); }
.recipes-card[hidden] { display: none; }
.recipes-card__title { margin: 0; font-size: var(--fs-h4); }

.recipes-find__go { flex: none; }
.recipes-products { display: flex; flex-direction: column; gap: var(--space-2); }
.recipes-product { display: flex; flex-direction: column; gap: var(--space-3); }
.recipes-product__choice.is-empty { border-style: dashed; }
.recipes-actionbar { display: flex; flex-direction: column; gap: var(--space-2); }
.recipes-credit { color: var(--link); }