/* MyFridge · Step Sequencer. An early-80s rhythm machine where every recipe is a row of ingredient
   keys lit by your fridge. The tokens below are the whole system (documented in DESIGN.md). */

@font-face {
  font-family: "Anton";
  src: url("/assets/anton-latin-684d7604.woff2") format("woff2");
  font-display: swap;
}

:root {
  --tomato: #c4341d;        /* the hot band that owns the top region */
  --tomato-deep: #9e2814;
  --paprika: #f07d1a;
  --saffron: #f6c90e;
  --cream: #fff4e0;         /* key plastic, text on red */
  --charcoal: #1d1a18;      /* machine body */
  --panel: #262220;
  --rule: #3a3431;
  --silk: #efe6d6;          /* silkscreen labels on charcoal */
  --silk-dim: #b9ab98;
  --led: #ff4a3d;
  --led-well: #120c0a;
  --display: "Anton", "Arial Narrow", sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 14px;
  --key-radius: 7px;
  --lift: 0 6px 16px rgb(0 0 0 / 0.35);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { background: var(--charcoal); color-scheme: dark; scrollbar-color: var(--tomato) var(--charcoal); }
body {
  margin: 0; min-height: 100vh; font: 1rem/1.5 var(--text); color: var(--silk); background: var(--charcoal);
  caret-color: var(--saffron); -webkit-font-smoothing: antialiased;
}
::selection { background: var(--saffron); color: var(--charcoal); }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { width: 1.1em; height: 1.1em; flex: none; }
button, input { font: inherit; }
form.button_to { display: contents; }

/* Masthead and the machine layout */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.25rem;
  background: var(--tomato); border-bottom: 1px solid var(--tomato-deep); }
.wordmark { font: 1.6rem/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; color: var(--cream);
  text-decoration: none; }
.wordmark span { color: var(--saffron); }
.admin-nav { display: flex; gap: 0.75rem; align-items: center; color: var(--cream); font-size: 0.9rem; }
.machine { display: grid; }
@media (min-width: 960px) {
  .machine { grid-template-columns: minmax(340px, 400px) 1fr; align-items: start; }
  .machine > .pantry { position: sticky; top: 0; min-height: calc(100vh - 3.5rem); }
}

/* The pantry: the hot band where you arm the keys */
.machine > .pantry { background: var(--tomato); color: var(--cream); padding: 1.5rem 1.25rem 2rem; display: grid; gap: 1.1rem;
  align-content: start; }
.pantry h1 { font: clamp(2.6rem, 9vw, 3.6rem)/0.95 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.finder input { width: 100%; min-height: 3.5rem; padding: 0 1.1rem; border: 0; border-radius: var(--radius);
  background: var(--cream); color: var(--charcoal); font-size: 1.1rem; box-shadow: var(--lift); }
.finder input::placeholder { color: #6b5a4b; }
.finder input:focus-visible { outline-color: var(--saffron); }
.finder input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 1.25rem; height: 1.25rem;
  background: var(--charcoal); cursor: pointer;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>") center / contain no-repeat; }
@media (max-width: 26rem) { .finder input { font-size: 1rem; padding-inline: 0.9rem; } }
.staples-hint { font-size: 0.9rem; }
.panel-label { font: 600 0.75rem/1 var(--text); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.6rem; }
.keys { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.suggestions:empty { display: none; }

.key-button, .chip {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 1rem; border: 0;
  border-radius: var(--key-radius); background: var(--charcoal); color: var(--cream); font-weight: 600; white-space: nowrap;
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.25); cursor: pointer;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}
.key-button:hover { transform: translateY(-2px); }
.key-button:active { transform: translateY(1px); box-shadow: none; }
.key-button.lit { background: var(--saffron); color: var(--charcoal); }
.chips { list-style: none; margin: 0; padding: 0; }
.chip { background: var(--cream); color: var(--charcoal); padding-right: 0.35rem; }
.chip::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--saffron);
  box-shadow: 0 0 10px var(--saffron); }
.chip-remove { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 0; border-radius: 6px;
  background: transparent; color: var(--charcoal); cursor: pointer; }
.chip-remove:hover { background: rgb(0 0 0 / 0.08); }

/* Results: banks of step rows, each bank one framed panel of the machine */
.results { padding: 1.5rem 1.25rem 3rem; display: grid; gap: 2.25rem; max-width: 60rem; }
.bank-title { display: flex; align-items: baseline; gap: 0.75rem; padding-bottom: 0.6rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule); font: 600 0.8rem/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase; }
.bank-title span { color: var(--saffron); font-variant-numeric: tabular-nums; }
.bank-0 .bank-title { color: var(--saffron); }
.recipes { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--rule); border-radius: 4px;
  background: var(--panel); }
.recipe { display: grid; gap: 0.7rem; padding: 1.1rem 1.1rem 1.2rem; }
.recipe + .recipe { border-top: 1px solid var(--rule); }
.recipe-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.recipe h3 { font: clamp(1.7rem, 5vw, 2.5rem)/1 var(--display); text-transform: uppercase; letter-spacing: 0.01em; }
.bank:first-of-type .recipe:first-child h3 { font-size: clamp(2.75rem, 11vw, 4.75rem); }
.recipe h3 a { text-decoration: none; }
.recipe h3 a:hover { color: var(--saffron); }
.recipe.ready h3 { color: var(--cream); }
.time { font: 600 0.95rem/1 var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.recipe .time, .times .time { flex: none; padding: 0.45rem 0.6rem; border-radius: 6px; background: var(--led-well); color: var(--led);
  text-shadow: 0 0 8px rgb(255 74 61 / 0.55); letter-spacing: 0.06em; }
.recipe .time.unset, .times .time.unset { background: none; color: var(--silk-dim); text-shadow: none; }

/* A step key per ingredient: lit when it is in the fridge, dark (named) when it is missing */
.steps { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.step { --key: var(--tomato); display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2rem; padding: 0.3rem 0.6rem;
  border-radius: 5px; background: var(--key); color: var(--charcoal); font: 700 0.68rem/1.1 var(--text);
  letter-spacing: 0.1em; text-transform: uppercase; }
.step::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--led-well); }
.step::after { content: attr(title); }
.step:nth-child(4n+2) { --key: var(--paprika); }
.step:nth-child(4n+3) { --key: var(--saffron); }
.step:nth-child(4n+4) { --key: var(--cream); }
.step.lit:nth-child(4n+1) { color: var(--cream); }
.step.lit::before { background: #fffbe8; box-shadow: 0 0 6px 1px rgb(255 251 232 / 0.85); }
.step.lit { animation: chase 900ms var(--ease) calc(var(--i) * 55ms) both; }
.step.dark { background: color-mix(in srgb, var(--key) 14%, var(--panel)); color: var(--silk-dim); }
@keyframes chase { from { filter: brightness(1.6) saturate(1.3); box-shadow: 0 0 22px var(--key); } }
.verdict { font-weight: 700; font-size: 1.05rem; color: var(--cream); }
.ready .verdict { color: var(--saffron); }
.meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; color: var(--silk-dim); font-size: 0.92rem; }
.rating { font-variant-numeric: tabular-nums; color: var(--silk); }
.rating::before { content: "Rated "; color: var(--silk-dim); }
.guidance { display: grid; gap: 0.6rem; padding: 2rem 0; max-width: 32rem; }
.guidance h2 { font: 2rem/1 var(--display); text-transform: uppercase; color: var(--cream); }
.guidance p { color: var(--silk-dim); }

/* Pattern page: one recipe, every line marked */
.pattern { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; display: grid; gap: 1.5rem; }
.back { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--silk-dim); text-decoration: none; font-weight: 600; }
.back:hover { color: var(--saffron); }
.pattern-head { display: grid; gap: 0.75rem; }
.pattern h1 { font: clamp(2.6rem, 8vw, 4.5rem)/0.95 var(--display); text-transform: uppercase; color: var(--cream); }
.pattern .meta { justify-content: flex-start; }
.times { display: flex; gap: 0.5rem; align-items: center; color: var(--silk-dim); }
.photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); background: var(--panel); }
.pattern-lines h2 { font: 600 0.8rem/1 var(--text); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.9rem; }
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.lines li { display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: 0.75rem; padding: 0.55rem 0.75rem;
  border-radius: var(--key-radius); background: var(--panel); }
.status { font: 700 0.72rem/1 var(--text); letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
  padding: 0.35rem 0; border-radius: 5px; }
.lines .have .status { background: var(--saffron); color: var(--charcoal); }
.lines .pantry .status { background: var(--cream); color: var(--charcoal); }
.lines .missing .status { background: transparent; color: var(--led); box-shadow: inset 0 0 0 2px var(--led); }
.lines .missing .line { color: var(--cream); font-weight: 600; }
.outbound { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3.25rem; padding: 0 1.4rem;
  border-radius: var(--key-radius); background: var(--saffron); color: var(--charcoal); font-weight: 800; text-decoration: none;
  box-shadow: var(--lift); transition: transform 160ms var(--ease); }
.outbound:hover { transform: translateY(-2px); }
.note { color: var(--silk-dim); font-size: 0.9rem; max-width: 60ch; }

/* Back office: same machine, quieter */
.console, .sign-in { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; display: grid; gap: 1.1rem; }
.sign-in { max-width: 26rem; }
.console h1, .sign-in h1 { font: 2.4rem/1 var(--display); text-transform: uppercase; color: var(--cream); }
.lede { color: var(--silk-dim); max-width: 60ch; }
.staples { color: var(--saffron); font-weight: 600; }
.console-search, .sign-in form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.sign-in form { display: grid; }
.console-search input, .sign-in input:not([type=submit]) { min-height: 2.75rem; padding: 0 0.9rem; border: 1px solid var(--rule);
  border-radius: var(--key-radius); background: var(--panel); color: var(--silk); }
.sign-in label, .console-search label { font-weight: 600; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }
th { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silk-dim); }
td.name { font-weight: 700; color: var(--cream); }
td.aliases { color: var(--silk-dim); font-size: 0.9rem; }
tr.is-staple td.name { color: var(--saffron); }

.flash { margin: 1rem 1.25rem 0; padding: 0.75rem 1rem; border-radius: var(--key-radius); background: var(--panel); color: var(--cream); }
.flash-alert { box-shadow: inset 0 0 0 2px var(--led); }
.colophon { padding: 1.5rem 1.25rem 2rem; color: var(--silk-dim); font-size: 0.8rem; border-top: 1px solid var(--rule); }

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}