/* Receptenhulp. Tokens and values from design_handoff_receptenhulp/README.md.
   Hand-written, no build step: the page count is small and the design is final,
   so a toolchain here would only be something else to keep running. */

/* Self-hosted, per the handoff. `make fonts` fetches these; the stack falls
   back to Georgia and the system sans if they are missing. */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/static/fonts/source-serif-4.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/source-serif-4-italic.woff2') format('woff2');
}
/* Plex is not a variable font on Google Fonts, so each weight is its own file.
   Only the two the design uses are fetched. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-400.woff2') format('woff2');
}

:root {
  --surface: #fbfcfd;
  --surface-raised: #fcfdfe;
  --surface-recipe: #fcfeff;
  --surface-muted: #ebeff3;
  --surface-accent: #e1eaee;

  --ink: #1e2b33;
  --ink-body: #26333c;
  --ink-prose: #38474f;
  --ink-hover: #33444e;
  --ink-secondary: #48575f;

  --muted-strong: #6f7c84;
  --muted: #78858d;
  --muted-soft: #8b979e;
  --muted-eyebrow: #87949b;
  --placeholder: #98a4ab;

  --accent: #2f6473;
  --accent-dark: #1f4a57;
  --accent-soft: #9cbbc4;
  --button-ink: #f4f9fb;

  --border: rgba(28, 44, 54, 0.13);
  --border-field: rgba(28, 44, 54, 0.2);
  --border-accent: rgba(47, 100, 115, 0.2);

  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink-body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Designed at 390px. Above 640 the column caps and centres; it never becomes
   two columns, and section 3 never moves into a sidebar — its position between
   the changes and the recipe is what gives it weight. */
.page {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--surface);
}

h1,
h2,
p {
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--accent-dark);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-eyebrow);
}

/* ---------------------------------------------------------------- landing */

.landing {
  padding: 30px 26px 34px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.headline-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.headline {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 33px;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

.lede {
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 16px+ is required — anything smaller triggers iOS zoom-on-focus. */
.field {
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border-field);
  border-radius: 16px;
  padding: 16px;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink-body);
  outline: none;
}
textarea.field {
  height: 172px;
  resize: none;
  display: block;
}
textarea.field.tall {
  height: 244px;
}
.field::placeholder {
  color: var(--placeholder);
}
.field:focus {
  border-color: rgba(47, 100, 115, 0.55);
  box-shadow: 0 0 0 3px rgba(47, 100, 115, 0.12);
}

.button {
  width: 100%;
  min-height: 48px;
  border: none;
  background: var(--ink);
  color: var(--button-ink);
  border-radius: 15px;
  padding: 19px 20px;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
}
.button:hover {
  background: var(--ink-hover);
}
.button:disabled {
  opacity: 0.45;
  cursor: default;
}

.footnote {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 2px 2px 0;
  text-wrap: pretty;
}

/* A plain sentence in the product's voice. Never a code, never a red box. */
.notice {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- waiting */

.waiting {
  padding: 30px 26px 34px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.waiting-heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 29px;
  line-height: 1.2;
  color: var(--ink);
  animation: breathe 4.5s ease-in-out infinite;
}

/* The submitted text, shown back. Low-contrast and clipped on purpose: this is
   texture, not something to read. */
.recipe-panel {
  position: relative;
  background: var(--surface-muted);
  border: 1px solid rgba(28, 44, 54, 0.12);
  border-radius: 16px;
  padding: 18px;
  height: 196px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.85;
  color: var(--muted-soft);
  white-space: pre-line;
}

.reading-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 34px;
  background: linear-gradient(
    180deg,
    rgba(130, 180, 200, 0),
    rgba(130, 180, 200, 0.3),
    rgba(130, 180, 200, 0)
  );
  animation: band 21s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.status-lines {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.status-line {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink-prose);
}
.status-line::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  transform: translateY(-4px);
}
.status-line:nth-child(1) {
  animation: s1 21s linear infinite;
}
.status-line:nth-child(2) {
  animation: s2 21s linear infinite;
}
.status-line:nth-child(3) {
  animation: s3 21s linear infinite;
}

.waiting-closing {
  border-top: 1px solid rgba(28, 44, 54, 0.12);
  padding-top: 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* Shown only once the wait runs long. A fourth quiet line, not an error. */
.waiting-slow {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 10px;
}

@keyframes s1 {
  0% { opacity: 0; }
  4%, 29% { opacity: 1; }
  35%, 100% { opacity: 0.26; }
}
@keyframes s2 {
  0%, 29% { opacity: 0; }
  35%, 62% { opacity: 1; }
  68%, 100% { opacity: 0.26; }
}
@keyframes s3 {
  0%, 62% { opacity: 0; }
  68%, 100% { opacity: 1; }
}
@keyframes band {
  0% { transform: translateY(-6px); }
  100% { transform: translateY(196px); }
}
@keyframes breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .reading-band {
    display: none;
  }
  .waiting-heading,
  .status-line {
    animation: none;
    opacity: 1;
  }
}

/* ----------------------------------------------------------------- result */

.result-head {
  padding: 30px 26px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.result-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

.result-body {
  padding: 24px 26px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section-heading {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
}

.assessment {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.prose {
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.58;
  color: var(--ink-prose);
  text-wrap: pretty;
}

.changes {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.changes.empty {
  gap: 11px;
}

.change {
  display: flex;
  gap: 13px;
}

/* A dash. Deliberately not an icon, not a checkmark, not a number. */
.change::before {
  content: '';
  width: 10px;
  height: 2px;
  background: var(--accent);
  flex: none;
  margin-top: 14px;
}

.change-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.change-what {
  font-family: var(--serif);
  font-size: 18.5px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

/* The face and colour shift is what marks this as the honest aside. Never
   behind a toggle, a tooltip or an accordion. */
.change-cost {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--muted-strong);
  text-wrap: pretty;
}

.no-changes {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--ink-secondary);
}

/* The only tinted, bordered panel on the page. That is what gives it weight
   comparable to the changes list. */
.left-alone {
  margin: 26px 26px 0;
  background: var(--surface-accent);
  border: 1px solid var(--border-accent);
  border-radius: 18px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Read at the hob, at arm's length, possibly with wet hands. */
.recipe {
  margin-top: 26px;
  background: var(--surface-recipe);
  border-top: 1px solid var(--border);
  padding: 28px 26px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.recipe-title-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.recipe-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: pretty;
}

.recipe-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-eyebrow);
}

.ingredients {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-body);
}

.ingredient {
  display: flex;
  gap: 12px;
}

/* Ingredients without a quantity keep the empty column so the names align. */
.ingredient-quantity {
  min-width: 66px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* "Voor de saus:" — allowed by the prompt as its own entry. */
.ingredient-heading {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin-top: 6px;
}

.method {
  display: flex;
  flex-direction: column;
  gap: 17px;
  font-size: 19.5px;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}

/* Steps are not numbered: the dash keeps the page free of anything that reads
   as counting or scoring. */
.step {
  display: flex;
  gap: 14px;
}
.step::before {
  content: '';
  width: 8px;
  height: 2px;
  background: var(--accent-soft);
  flex: none;
  margin-top: 15px;
}

.share {
  padding: 22px 26px 30px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.share .button {
  border-radius: 13px;
  padding: 14px 16px;
  font-size: 15.5px;
}

.share p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

.share .invitation {
  font-size: 14px;
}

@media (max-width: 359px) {
  .headline {
    font-size: 30px;
  }
  .result-title {
    font-size: 26px;
  }
}