/* recipes: minimal custom styles; prebuilt Tailwind handles the rest. */
:root { color-scheme: light; }

/* nav cog menu — right-aligned disclosure so options never overflow on phones */
.nav-menu { position: relative; }
.nav-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; width: 2rem; height: 2rem; border-radius: 6px; color: #fff; opacity: .85;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:hover, .nav-menu[open] > summary { opacity: 1; background: rgba(255,255,255,.14); }
.nav-menu > summary svg { width: 1.2rem; height: 1.2rem; }
.nav-menu-panel {
  position: absolute; right: 0; top: calc(100% + .45rem); z-index: 40; min-width: 12rem;
  background: #fff; color: #1f2937; border: 1px solid #e5e7eb; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: .35rem 0;
}
.nav-menu-email { padding: .4rem .9rem; font-size: .75rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; }
.nav-menu-item { display: block; width: 100%; text-align: left; padding: .45rem .9rem; font-size: .9rem; background: none; border: 0; cursor: pointer; }
.nav-menu-item:hover { background: #f3f4f6; }
.nav-menu-item--sep { border-top: 1px solid #e5e7eb; margin-top: .25rem; }
.nav-menu-lang { display: flex; gap: .5rem; align-items: center; padding: .4rem .9rem; font-size: .8rem; border-top: 1px solid #e5e7eb; margin-top: .25rem; }
.nav-menu-lang a.active { font-weight: 600; text-decoration: underline; }

/* recipe form rows */
.row-grid { display: grid; gap: .4rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .ing-row .row-grid { grid-template-columns: 1.2fr 2fr .7fr 1.2fr 1.4fr auto; align-items: start; } .step-row .row-grid { grid-template-columns: 1.2fr 3fr 1fr .8fr auto; align-items: start; } }
.row-actions { display: flex; gap: .25rem; }
.row-actions button { padding: .25rem .45rem; border: 1px solid #d1d5db; border-radius: 4px; background: #fff; font-size: .8rem; cursor: pointer; }
.field-error { color: #b91c1c; font-size: .75rem; }

/* label chips */
.chip { display: inline-block; border-radius: 999px; padding: .1rem .6rem; font-size: .75rem; border: 1px solid #d1d5db; background: #f9fafb; }
.chip.gray { background: #f3f4f6; } .chip.red { background: #fee2e2; } .chip.orange { background: #ffedd5; } .chip.amber { background: #fef3c7; }
.chip.green { background: #dcfce7; } .chip.teal { background: #ccfbf1; } .chip.blue { background: #dbeafe; } .chip.purple { background: #f3e8ff; }