@import url("assets/css/tokens.css");
@import url("assets/css/foundation.css");
@import url("assets/css/shell.css");

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--color-text);
  background: var(--color-canvas);
  font: 1rem/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body[aria-busy="true"] { cursor: progress; opacity: .72; }

a {
  color: var(--color-primary);
  font-weight: 650;
  text-decoration-thickness: .08em;
  text-underline-offset: .2em;
}

a:hover { color: var(--color-primary-hover); }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(217, 139, 70, .55);
  outline-offset: 3px;
}

.page-shell {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
  padding-block: clamp(1rem, 4vw, 3rem);
}

.page-shell--narrow { width: min(100% - 2rem, 54rem); }

.page-card,
body > div[align="center"] {
  width: min(100%, 52rem);
  margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.search-form {
  inline-size: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-3);
}

.search-form__actions { padding-block-end: 1px; }

.recipe-browser { padding-block-start: 0; }

.recipe-browser__heading {
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}

.recipe-browser__heading-row { justify-content: space-between; }
.recipe-browser__summary { color: var(--color-text-muted); }
.recipe-browser__sort { padding: var(--space-3); background: var(--color-surface-muted); border-radius: var(--radius-md); }

.recipe-results {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-3);
  list-style: none;
}

.recipe-result { min-block-size: 5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.recipe-result__link { inline-size: 100%; min-block-size: var(--control-min); display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); text-decoration: none; }
.recipe-result__name { font-size: var(--text-lg); font-weight: 700; }
.recipe-result__favorite { color: var(--color-accent); }

.recipe-pagination ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); list-style: none; }
.recipe-pagination__page { min-inline-size: var(--control-min); min-block-size: var(--control-min); display: grid; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; text-decoration: none; }
.recipe-pagination__page[aria-current="page"] { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); }
.recipe-browser__management { text-align: center; }

.recipe-detail-page {
  min-block-size: 0;
  padding-block-start: 0;
}

.recipe-detail-page__status { margin-block-end: var(--space-4); }

.recipe-detail-actions {
  margin-block-end: var(--space-6);
  justify-content: flex-end;
}

.recipe-detail-actions__source {
  max-inline-size: 32rem;
  overflow-wrap: anywhere;
  color: var(--color-text-muted);
}

.recipe-detail__favorite {
  color: var(--color-accent);
  font-size: var(--text-xl);
  line-height: 1;
}

.recipe-detail__favorite-label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
}

.recipe-detail__grid {
  display: grid;
  grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.5fr);
  align-items: start;
  gap: var(--space-4);
}

.recipe-detail__section { display: grid; gap: var(--space-6); }
.recipe-detail__section > h2 { padding-block-end: var(--space-3); border-block-end: 1px solid var(--color-border); }
.recipe-detail__groups { --stack-space: var(--space-6); }
.recipe-detail__list { margin: 0; padding-inline-start: 1.4rem; }
.recipe-detail__list li { margin-block: var(--space-2); }
.recipe-detail__list[data-checkable-ingredients] li { cursor: pointer; }
.recipe-detail__list[data-checkable-ingredients] li:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}
.recipe-detail__list[data-checkable-ingredients] li.checked { color: var(--color-text-muted); text-decoration: line-through; }
.recipe-detail__steps li::marker { color: var(--color-primary); font-weight: 800; }
.recipe-detail__legacy { max-inline-size: var(--content-reading); margin-inline: auto; }
.recipe-detail__legacy-content { overflow-wrap: anywhere; }

.recipe-editor-shell {
  min-block-size: 0;
  padding-block-start: 0;
}

.recipe-editor-page,
.recipe-editor {
  display: grid;
  gap: var(--space-6);
}

.recipe-editor__status { margin-block-end: var(--space-4); }

.recipe-editor__import {
  margin-block-end: var(--space-6);
  background: var(--color-surface-muted);
}

.recipe-editor__import-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-3);
}

.recipe-editor__browser-import {
  border-block-start: 1px solid var(--color-border);
  padding-block-start: var(--space-3);
}

.recipe-editor__browser-import summary {
  font-weight: 700;
  cursor: pointer;
}

.recipe-editor__browser-import[open] summary {
  margin-block-end: var(--space-3);
}

.recipe-editor__bookmarklet {
  justify-self: start;
}

.recipe-editor__details { gap: var(--space-6); }
.recipe-editor__choices { --cluster-space: var(--space-6); }
.recipe-editor__textarea { min-block-size: 16rem; line-height: 1.5; }

.recipe-editor__category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-2) var(--space-4);
}

.recipe-editor__actions { justify-content: flex-end; }
.recipe-editor__secondary-actions { margin-block: var(--space-6); }
.recipe-editor__danger-zone { margin-block-start: var(--space-8); border-color: var(--color-danger); }
.recipe-editor__danger-zone .button { justify-self: start; }
.recipe-editor__ingredient-rows { min-inline-size: 0; }
.recipe-ingredient-editor .data-table { min-inline-size: 108rem; }
.recipe-ingredient-editor__short { min-inline-size: 7rem; }
.recipe-ingredient-editor__quantity { min-inline-size: 6rem; }
.recipe-ingredient-editor__preparation { min-inline-size: 12rem; }
.recipe-ingredient-editor__row-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); min-inline-size: 13rem; }
.recipe-ingredient-editor__drag { cursor: grab; }
.recipe-ingredient-editor__drag:active { cursor: grabbing; }
.recipe-ingredient-editor tr.is-dragging { opacity: 0.55; }
.recipe-ingredient-editor tr.is-removed { opacity: 0.6; background: var(--color-surface-muted); }
.recipe-ingredient-editor tr.is-removed input:not([data-remove-ingredient]) { text-decoration: line-through; }
.recipe-ingredient-editor__remove { color: var(--color-danger); }

.recipe-save-result {
  min-block-size: 0;
  min-inline-size: 0;
  padding-block-start: 0;
}

.recipe-save-result form,
.recipe-ingredient-editor {
  min-inline-size: 0;
  inline-size: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

hr {
  width: min(100%, 30rem) !important;
  height: 1px;
  margin: 1.5rem auto;
  background: var(--border);
  border: 0;
}

a.huge {
  display: inline-block;
  margin: .25rem;
  padding: .55rem .9rem;
  background: var(--surface-soft);
  border-radius: 999px;
  font-size: 1rem;
  text-decoration: none;
}

.site-nav {
  width: min(100%, 52rem);
  margin: 2rem auto 0;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  border-top: 1px solid var(--border);
}

.site-nav a {
  min-height: 2.75rem;
  padding: .65rem .9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
  border-radius: 999px;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  background: var(--primary);
  color: white;
}

.Top {
  min-height: 6rem;
  padding: 1.25rem clamp(1rem, 5vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  font-family: Georgia, serif;
  font-size: clamp(1.8rem, 5vw, 3.25rem);
  line-height: 1.15;
  text-align: center;
}

.Back, .Source {
  position: fixed;
  z-index: 20;
  top: 1rem;
  padding: .45rem .75rem;
  background: rgba(255, 253, 249, .94);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.Back { left: 1rem; }
.Source { right: 1rem; }

.Container {
  width: min(100% - 2rem, 78rem);
  margin: 1.5rem auto 5rem;
  display: grid;
  grid-template-columns: minmax(17rem, .8fr) minmax(0, 1.5fr);
  gap: 1.25rem;
}

.Left, .Middle {
  padding: clamp(1.15rem, 3vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(35, 75, 52, .07);
}

.Left ul, .Middle ul { margin: .5rem 0 1.5rem; padding-left: 1.3rem; }
.Left li, .Middle li { margin-block: .55rem; }
.Left li { cursor: pointer; }
.Left li.checked { color: var(--muted); text-decoration: line-through; }

.bottom {
  position: fixed;
  inset: auto 0 0;
  padding: .65rem;
  text-align: center;
  background: rgba(245, 243, 238, .94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
}

table {
  width: min(100%, 42rem);
  margin: 1.25rem auto;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

td, th { padding: 1rem; text-align: left; }
.layout { background: transparent; }

@media (max-width: 720px) {
  .page-shell { width: min(100% - 1rem, 72rem); padding-block: .5rem; }
  .page-card, body > div[align="center"] { padding: 1.1rem; border-radius: 14px; }
  .search-form { grid-template-columns: 1fr; align-items: stretch; }
  .search-form__actions { padding-block-end: 0; }
  .recipe-browser__heading-row { align-items: stretch; flex-direction: column; }
  .recipe-detail-actions { align-items: stretch; flex-direction: column; }
  .recipe-detail__grid { grid-template-columns: 1fr; }
  .recipe-editor__import-controls { grid-template-columns: 1fr; }
  .recipe-editor__actions { align-items: stretch; flex-direction: column; }
  .recipe-editor__actions > * { inline-size: 100%; }
  .Container { width: min(100% - 1rem, 78rem); grid-template-columns: 1fr; margin-top: .75rem; }
  .Back, .Source { position: static; display: inline-block; margin: .6rem .35rem; }
  .Top { clear: both; min-height: 5rem; }
  table, tbody, tr, td { display: block; width: 100% !important; height: auto !important; }
  td + td { border-top: 1px solid var(--border); }
  .site-nav { align-items: stretch; flex-direction: column; }
  .site-nav a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}