:root {
  --color-primary: oklch(47.33% 0.0881 175.76);
  --color-primary-light: oklch(53.56% 0.0881 175.76);
  --color-primary-lighter: oklch(88.58% 0.073 175.76);
  --color-primary-ligh-ultra: oklch(92.94% 0.0038 175.61);
  --color-primary-dark: oklch(43.71% 0.0814 176.05);
  --color-text-light: oklch(46.27% 0.0081 145.44);
  --color-text: oklch(27.45% 0.012 285.78);
  --color-text-dark: oklch(0% 0 0);
  --color-secondary-light: oklch(100% 0 0);
  --color-secondary: oklch(84.12% 0.0093 175.61);
  --color-secondary-dark: oklch(87.69% 0.0093 175.61);
  --color-delete: oklch(89.18% 0.0568 18.27);
  --color-delete-dark: oklch(68.99% 0.1378 18.27);
  --color-error: oklch(63.7% 0.237 25.331);
  --color-confirm: oklch(72.3% 0.219 149.579);
  --filter-color-primary: invert(26%) sepia(12%) saturate(6209%) hue-rotate(137deg) brightness(106%) contrast(98%);
  --filter-color-text-light: invert(35%) sepia(5%) saturate(336%) hue-rotate(71deg) brightness(96%) contrast(92%);
  --filter-color-text: invert(7%) sepia(5%) saturate(2664%) hue-rotate(202deg) brightness(93%) contrast(80%);
  --filter-color-secondary-light: brightness(0%) invert(100%) saturate(100%);
  --spacing: 0.25rem;
  --text-base: 1rem;
  --text-base-line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg-line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl-line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl-line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl-line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl-line-height: calc(2.5 / 2.25);
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-xxl: 2rem;
}

*, ::before, ::file-selector-button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html {
  line-height: 1.5;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: var(--color-text);
  background-color: var(--color-primary-ligh-ultra);
}

a {
  color: var(--color-text);
  text-decoration-line: underline;

  &:hover {
    @media (hover: hover) {
      color: var(--color-primary);
    }
  }
}

button, input, ::file-selector-button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
}

button, ::file-selector-button {
  cursor: pointer;
}

::file-selector-button {
  margin-inline-end: 4px;
}

h1, h2 {
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin-bottom: calc(var(--spacing) * 6);
}

h1 {
  font-size: var(--text-4xl);
  line-height: var(--text-4xl-line-height);
  color: var(--color-primary);
  display: flex;
  align-items: baseline;
  justify-content: center;
}

h2 {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl-line-height);
}

h3 {
  font-size: var(--text-xl);
  line-height: var(--text-xl-line-height);
  font-weight: var(--font-weight-semibold);
  margin-top: calc(var(--spacing) * 4);
  margin-bottom: var(--spacing);
}

input[type=text],
input[type=password],
input[type=number] {
  border-radius: var(--radius-md);
  padding: calc(var(--spacing) * 1.5);
  outline-color: var(--color-primary);
  background-color: var(--color-secondary-light);
}

img {
  display: block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

progress {
  color: var(--color-text);
  accent-color: var(--color-primary);
  font-size: var(--text-base);
  line-height: var(--text-base-line-height);
}

*[draggable=true] {
  cursor: grab;
}

*[data-state="hidden"] {
  display: none !important;
}

header > nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: .375rem;
  font-size: var(--text-lg);
  line-height: var(--text-lg-line-height);
  color: var(--color-secondary-light);
  background-color: var(--color-primary);

  @media (max-width: 768px) {
    flex-direction: column;
    align-items: stretch;
  }
}

.logo-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-left: calc(var(--spacing) * 2);
}

.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary-light);
  text-decoration-line: none;

  &:hover {
    @media (hover: hover) {
      color: var(--color-secondary-light);
    }
  }
}

.logo > img {
  height: calc(var(--spacing) * 6);
  filter: var(--filter-color-secondary-light);
}

.logo > span {
  margin-left: calc(var(--spacing) * 4);

  &:hover {
    @media (hover: hover) {
      text-decoration-line: underline;
    }
  }
}

.menu-button {
  display: none;

  @media (max-width: 768px) {
    display: flex;
    align-items: center;
  }
}

.menu-button > img {
  filter: var(--filter-color-secondary-light);
}

#hideableMenu {
  display: flex;
  flex-direction: row;
  align-items: center;

  @media (max-width: 768px) {
    display: none;
    flex-direction: column;
  }
}

#hideableMenu[data-state="show"] {
  display: flex;
}

#hideableMenu .search {
  margin-left: calc(var(--spacing) * 4);
  margin-top: calc(var(--spacing) * 4);
  display: flex;
  align-items: center;

  @media (min-width: 48rem) {
    margin-top: 0;
  }
}

#hideableMenu .search > a,
#hideableMenu .search > input[type=text],
#hideableMenu .search > button {
  color: var(--color-text);
  height: calc(var(--spacing) * 10);
  padding: 0;
  border-radius: 0;
  border: none;
  outline-style: none;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;

  @media (forced-colors: active) {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  &:focus-visible {
    border-color: var(--color-primary-lighter);
  }
}

#hideableMenu .search > input[type=text] {
  background-color: var(--color-secondary-light);
  min-width: calc(var(--spacing) * 40);
  padding-left: calc(var(--spacing) * 4);
  border-top-left-radius: var(--radius-xxl);
  border-bottom-left-radius: var(--radius-xxl);
}

#hideableMenu .search > a {
  background-color: var(--color-secondary-light);
  line-height: var(--text-2xl-line-height);
  font-weight: var(--font-weight-bold);
  padding-right: calc(var(--spacing) * 2);
  margin: 0;
  font-size: var(--text-2xl);
  text-decoration-line: none;

  &:hover {
    @media (hover: hover) {
      color: var(--color-text);
    }
  }
}

#hideableMenu .search > button {
  background-color: var(--color-secondary-dark);
  display: flex;
  align-items: center;
  padding-inline: calc(var(--spacing) * 3);
  border-top-right-radius: var(--radius-xxl);
  border-bottom-right-radius: var(--radius-xxl);
}

#hideableMenu .search > button > img {
  filter: var(--filter-color-text);
}

#hideableMenu > a,
#hideableMenu > span,
#hideableMenu > form > input[type=submit] {
  margin-inline: calc(var(--spacing) * 4);
  margin-block: calc(var(--spacing) * 2);
  cursor: pointer;
  color: var(--color-secondary-light);
  text-decoration-line: none;

  &:hover {
    @media (hover: hover) {
      color: var(--color-secondary-light);
    }
  }

  @media (min-width: 48rem) {
    margin-block: 0;
  }
}

#hideableMenu > a,
#hideableMenu .account > a,
#hideableMenu > form > input[type=submit] {
  color: var(--color-secondary-light);
  text-decoration-line: none;

  &:hover {
    @media (hover: hover) {
      color: var(--color-secondary-light);
      text-decoration-line: underline;
    }
  }
}

#hideableMenu .account {
  display: flex;
  align-items: center;
}

#hideableMenu .account > img {
  margin-right: var(--spacing);
  filter: var(--filter-color-secondary-light);
}

main {
  margin: var(--spacing);

  @media (min-width: 64rem) {
    margin: calc(var(--spacing) * 6);
  }
}

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.primary-button,
.secondary-button,
::file-selector-button {
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: calc(var(--spacing) * 1.5);
  text-decoration-line: none;
  text-align: center;
}

.primary-button {
  background-color: var(--color-primary);
  color: var(--color-secondary-light);

  &:hover {
    @media (hover: hover) {
      background-color: var(--color-primary-light);
      color: var(--color-secondary-light);
    }
  }
}

.primary-button > img {
  filter: var(--filter-color-secondary-light);
}

.secondary-button,
::file-selector-button {
  background-color: var(--color-secondary-dark);
  text-decoration-line: none;

  &:hover {
    @media (hover: hover) {
      color: var(--color-text);
      background-color: var(--color-secondary);
    }
  }
}

::file-selector-button:hover {
  @media (hover: hover) {
    color: var(--color-text);
    background-color: var(--color-secondary);
  }
}

.error-message {
  color: var(--color-error);
  text-align: center;
  margin-bottom: calc(var(--spacing) * 2);
}

.confirm-message {
  color: var(--color-confirm);
  text-align: center;
  margin-bottom: calc(var(--spacing) * 2);
}

form.vertical {
  display: flex;
  flex-direction: column;
  width: 100%;

  :where(& > :not(:last-child)) {
    margin-block-start: 0;
    margin-block-end: calc(var(--spacing) * 3);
  }

  @media (min-width: 48rem) {
    width: calc(var(--spacing) * 72);
  }
}

form.vertical > label {
  display: flex;
  flex-direction: column;
}

.visibility-icon {
  margin-left: calc(var(--spacing) * 3);
  filter: var(--filter-color-primary);
}

.image-viewer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  @media (min-width: 64rem) {
    flex-direction: row;
  }
}

.image-viewer > div > img {
  margin-inline: auto;
  max-height: 40rem;
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  @media (min-width: 64rem) {
    max-width: 50rem;
  }
}

#image-thumbnails {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  overflow-x: auto;

  @media (min-width: 64rem) {
    flex-wrap: nowrap;
    flex-direction: column;
    max-height: 40rem;
    overflow-y: auto;
    margin-left: calc(var(--spacing) * 6);
  }
}

#image-thumbnails > button {
  margin-block: var(--spacing);
  margin-inline: var(--spacing);

  @media (min-width: 64rem) {
    margin-block: calc(var(--spacing) * 2);
  }
}

#image-thumbnails > button > img {
  border-radius: var(--radius-lg);
  max-height: calc(var(--spacing) * 24);
  max-width: calc(var(--spacing) * 24);

  @media (min-width: 64rem) {
    max-height: calc(var(--spacing) * 48);
  }
}

.ingredients-steps {
  margin-top: calc(var(--spacing) * 8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  @media (min-width: 64rem) {
    flex-direction: row;
  }
}

.ingredients {
  @media (min-width: 96rem) {
    flex-shrink: 0;
  }

  @media (min-width: 64rem) {
    padding-right: calc(var(--spacing) * 4);
  }
}

.ingredients > h2,
.edit-ingredients > h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-weight: var(--font-weight-semibold);
  margin-bottom: calc(var(--spacing) * 2);
}

#numberOfPortions {
  margin-inline: calc(var(--spacing) * 2);
  padding-block: 0;
  width: calc(var(--spacing) * 16);
}

#resetQuantities {
  margin-bottom: calc(var(--spacing) * 4);
  background-color: var(--color-secondary-dark);
  padding: var(--spacing);
  border-radius: var(--radius-md);
}

.ingredients > div {
  display: flex;
  flex-direction: column;
}

.ingredients label {
  margin-block: calc(var(--spacing) * 2);
  display: flex;
  align-items: center;
}

.ingredients label > div,
.ingredients label > div > input[type=checkbox] {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}

.ingredients label > div > input[type=checkbox] {
  accent-color: var(--color-primary);
}

.ingredients label > input[type=number] {
  margin-left: calc(var(--spacing) * 2);
  padding-block: 0;
  width: calc(var(--spacing) * 16);
}

.ingredients label > span {
  margin-left: calc(var(--spacing) * 2);
}

.steps {
  border-top-style: dotted;
  border-top-width: 2px;
  border-color: var(--color-primary);
  margin-top: calc(var(--spacing) * 4);
  padding-top: calc(var(--spacing) * 2);

  @media (min-width: 64rem) {
    padding-left: calc(var(--spacing) * 4);
    border-left-style: solid;
    border-left-width: 2px;
    margin-top: 0;
    padding-top: 0;
    border-top-width: 0;
  }
}

.steps > h2,
.sources > h2,
.edit-sources > h2,
.edit-images > h2 {
  font-weight: var(--font-weight-semibold);
  margin-bottom: calc(var(--spacing) * 2);
  text-align: left;
}

.steps > div {
  display: flex;
  flex-direction: column;
}

.steps label {
  margin-block: calc(var(--spacing) * 2);
  display: flex;
  align-items: center;
}

.steps label > div,
.steps label > div > input[type=checkbox] {
  width: calc(var(--spacing) * 6);
  height: calc(var(--spacing) * 6);
}

.steps label > div > input[type=checkbox] {
  accent-color: var(--color-primary);
}

.steps label > span {
  margin-left: calc(var(--spacing) * 2);
}

.steps label {
  counter-increment: step-counter;
}

.steps label span::before {
  content: counter(step-counter)'. ';
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.strike-through {
  text-decoration-line: line-through;
}

.sources,
.edit-sources {
  border-top-style: dotted;
  border-top-width: 2px;
  border-color: var(--color-primary);
  margin-top: calc(var(--spacing) * 4);
  padding-top: calc(var(--spacing) * 2);

  @media (min-width: 64rem) {
    border-top-width: 0;
  }
}

.sources {
  list-style-type: disc;
  list-style-position: inside;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sources a {
  word-break: break-all;
}

.visibility {
  border-top-style: dotted;
  border-top-width: 2px;
  border-color: var(--color-primary);
  margin-top: calc(var(--spacing) * 8);
  padding-top: calc(var(--spacing) * 3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  align-items: center;

  @media (min-width: 64rem) {
    border-top-width: 0;
  }
}

.visibility > p:first-child {
  display: flex;
  align-items: center;
}

.visibility > p:first-child > img {
  margin-right: calc(var(--spacing) * 2);
  filter: var(--filter-color-text);
}

.visibility .author {
  font-weight: var(--font-weight-bold);
}

.recipe-action {
  display: flex;
  align-items: center;
}

.recipe-action > a {
  margin-right: calc(var(--spacing) * 4);
}

#recipeForm > div {
  margin-top: calc(var(--spacing) * 8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  @media (min-width: 64rem) {
    flex-direction: row;
  }
}

#recipeForm > nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-block: calc(var(--spacing) * 2);
}

.not-logged-in {
  display: flex;
  flex-direction: column;

  :where(& > :not(:last-child)) {
    margin-block-start: 0;
    margin-block-end: calc(var(--spacing) * 3);
  }
}

.not-logged-in > p {
  text-align: center;
}

.not-logged-in > a {
  margin-inline: auto;
  display: flex;
}

.not-logged-in > a > span {
  margin-left: var(--spacing);
}

.not-logged-in > button {
  magin-inline: auto;
}

.recipes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 6);
}

.recipes > article {
  width: calc(var(--spacing) * 72);
  border-radius: var(--radius-lg);
  background-color: var(--color-secondary-light);

  @media (min-width: 64rem) {
    width: calc(var(--spacing) * 96);
  }
}

.recipes > article > a {
  text-decoration-line: none;

  &:hover {
    @media (hover: hover) {
      text-decoration-line: underline;
    }
  }
}

.recipes > article > a > div {
  width: 100%;
  height: calc(var(--spacing) * 60);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.recipes > article > a > div > img.cover {
  width: 100%;
  height: calc(var(--spacing) * 60);
  object-fit: cover;
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.recipes > article > a > div > img.no-photo {
  transform: scale(4, 4);
  filter: var(--filter-color-text-light);
}

.recipes > article > a:hover > span {
  @media (hover: hover) {
    text-decoration-line: none;
  }
}

.recipes > article > a > header {
  margin: 0;
  padding-inline: calc(var(--spacing) * 2);
  padding-block: var(--spacing);
  text-align: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--text-lg);
  line-height: var(--text-lg-line-height);
  display: block;
  color: var(--color-primary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.recipes > article > footer {
  text-align: center;
  margin-bottom: calc(var(--spacing) * 2);
}

.step,
.ingredient,
.source {
  margin-block: calc(var(--spacing) * 3);
  display: flex;
  align-items: center;
}

.step > span,
.ingredient > span,
.source > span {
  margin-right: var(--spacing);
}

#stepAdder > input[type=text],
#ingredientAdder > input[type=text] {
  width: 100%;
  margin-right: var(--spacing);
}

.step > div {
  display: flex;
  align-items: center;
  width: 100%;
}

.step > div > input[type=text],
.ingredient > div > .section > input[type=text],
.source > input[type=text],
.ingredient-note > input[type=text] {
  margin-right: var(--spacing);
  flex-grow: 1;
}

.step > div > input[type=text].section,
.ingredient > div > .section > input[type=text] {
  font-weight: var(--font-weight-semibold);
}

button.add,
button.delete,
button.add-note,
button.delete-note {
  display: flex;
  align-items: center;
}

button.add > img,
button.delete > img,
button.add-note > img,
button.delete-note > img {
  filter: var(--filter-color-text);
}

button.delete {
  background-color: var(--color-delete);

  &:hover {
    @media (hover: hover) {
      background-color: var(--color-delete-dark);
    }
  }
}

button.add-note {
  margin-right: var(--spacing);
}

#sources input[name=source] {
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#sources button.delete {
  border-radius: 0;
  border-left-width: 0;
}

#sources button.add {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0;
}

.ingredient-note {
  display: flex;
  align-items: center;
  margin-top: var(--spacing);
  width: 100%;
}

.ingredient > div {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  width: 100%;
}

.ingredient > div > .section,
.ingredient > div > .ingredient-type {
  display: flex;
  align-items: center;
  width: 100%;
}

.ingredient > div > .ingredient-type {
  flex-wrap: wrap;
}

.ingredient > div > .ingredient-type > input[type=number] {
  width: calc(var(--spacing) * 24);
  margin-right: var(--spacing);
}

.ingredient > div > .ingredient-type > input[name=ingredient_unit_of_measure] {
  width: calc(var(--spacing) * 32);
  margin-right: var(--spacing);
}

.ingredient > div > .ingredient-type > input[name=ingredient_name] {
  margin-right: var(--spacing);
  flex-grow: 1;
}

.edit-recipe-title {
  text-align: center;
}

.edit-recipe-title > input[type=text] {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl-line-height);
  padding: calc(var(--spacing) * 2);
  width: 100%;
  text-align: center;

  @media (min-width: 48rem) {
    width: 40rem;
  }
}

.edit-steps {
  width: 100%;

  @media (min-width: 64rem) {
    flex: 2;
  }
}

.image {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: calc(var(--spacing) * 4);
}

.image > img {
  max-height: calc(var(--spacing) * 24);

  @media (min-width: 64rem) {
    max-height: calc(var(--spacing) * 48);
  }
}

.image > form {
  margin-top: var(--spacing);
}

.edit-images {
  margin-bottom: calc(var(--spacing) * 4);
}

#images {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: calc(var(--spacing) * 4);
}

.edit-visibility {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: calc(var(--spacing) * 4);
}

.edit-visibility > label {
  display: flex;
  align-items: center;
  margin-inline: calc(var(--spacing) * 2);
  cursor: pointer;
}

.edit-visibility > label > input[type=radio] {
  accent-color: var(--color-primary);
  margin-right: var(--spacing);
  width: calc(var(--spacing) * 4);
  height: calc(var(--spacing) * 4);
}

.edit-visibility > label > img {
  margin-left: var(--spacing);
  filter: var(--filter-color-primary);
}

.edit-ingredients {
  width: 100%;

  @media (min-width: 64rem) {
    flex: 1;
    padding-right: calc(var(--spacing) * 4);
  }
}

.edit-ingredients > h2 > input[type=number] {
  margin-inline: calc(var(--spacing) * 2);
  width: calc(var(--spacing) * 16);
}

.edit-ingredients > h2 > input[type=text] {
  width: calc(var(--spacing) * 64);
}

.dragging {
  opacity: 60%;
}