/* =================================================================
   Fonts, served from our own origin.

   Google Fonts would send every visitor's IP address and page referrer
   to a third party on every page load, and would force that origin into
   the Content-Security-Policy. Self-hosting removes both. Total cost:
   108 KB, cached for a year.
   ================================================================= */

@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/silkscreen-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/silkscreen-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/pixelify-sans-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/pixelify-sans-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/pixelify-sans-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/pixelify-sans-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/hanken-grotesk-latin-700-normal.woff2') format('woff2');
}

/* =================================================================
   Audachef design system

   Everything here descends from the fried egg sprite: the yolk orange,
   the pan charcoal, the cream of the egg white. One palette, one type
   pairing, one spacing scale. Components below only combine tokens —
   no page ever invents its own colour or size.

   Silkscreen  = labels, numbers, chrome (small, all caps, wide tracking)
   Pixelify    = anything the cook reads at length
   Hanken      = long-form body copy where pixel type would tire the eye
   ================================================================= */

:root {
  /* --- colour ------------------------------------------------------ */
  --void:      #08070C;   /* page */
  --pan:       #131219;   /* raised surface */
  --pan-lit:   #1F1D28;   /* surface on surface */
  --edge:      #2B2836;   /* hairline borders */
  --rim:       #6E6889;   /* muted text */
  --cream:     #E8E3D7;   /* primary text */

  --yolk:      #F6AB28;   /* primary action, focus, current state */
  --yolk-deep: #DE8A15;
  --yolk-dim:  rgba(246, 171, 40, .12);
  --butter:    #B2893A;   /* secondary accent, completed state */
  --chili:     #E0533D;   /* destructive / errors */
  --herb:      #6FAE6B;   /* success */

  /* --- type -------------------------------------------------------- */
  --display: 'Silkscreen', monospace;
  --pixel:   'Pixelify Sans', 'Silkscreen', monospace;
  --body:    'Hanken Grotesk', system-ui, sans-serif;

  /* --- space (4px base) -------------------------------------------- */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;

  --radius: 3px;              /* pixel art wants corners, not pills */
  --shell:  min(1180px, 100% - 2.5rem);
  --ring:   0 0 0 2px var(--yolk);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--void);
  color: var(--cream);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a   { color: var(--yolk); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius); }

.shell { width: var(--shell); margin-inline: auto; }

/* --- accessibility ------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--s4); top: -3rem;
  background: var(--yolk); color: var(--void);
  padding: var(--s2) var(--s4); font-family: var(--display); font-size: .7rem;
  z-index: 50; transition: top .15s ease;
}
.skip-link:focus { top: var(--s4); }

/* =================================================================
   Masthead
   ================================================================= */

.masthead {
  border-bottom: 1px solid var(--edge);
  background: linear-gradient(var(--pan), var(--void));
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(8px);
}

.masthead__inner {
  display: flex; align-items: center; gap: var(--s5);
  padding-block: var(--s4);
}

.wordmark {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--cream);
  text-decoration: none;
  display: flex; align-items: center; gap: var(--s2);
  white-space: nowrap;
}
.wordmark b { color: var(--yolk); font-weight: 400; }

/* The yolk in the wordmark. A circle is the whole logo. */
.wordmark::before {
  content: "";
  width: .85rem; height: .85rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #FFD173, var(--yolk) 62%, var(--yolk-deep));
  box-shadow: 0 0 12px rgba(246,171,40,.55);
  flex: none;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

.nav__link {
  font-family: var(--display); font-size: .68rem; letter-spacing: .06em;
  color: var(--rim); text-decoration: none; text-transform: uppercase;
  padding: var(--s2) var(--s3); border-radius: var(--radius);
  white-space: nowrap;              /* "My recipes" must not wrap to two lines */
  transition: color .15s ease, background .15s ease;
}
.nav__link:hover        { color: var(--cream); background: var(--pan-lit); }
.nav__link[aria-current] { color: var(--yolk); }

.nav__user {
  font-family: var(--display); font-size: .62rem; color: var(--rim);
  padding-left: var(--s3); border-left: 1px solid var(--edge);
  display: flex; align-items: center; gap: var(--s3);
}

/* =================================================================
   Buttons
   ================================================================= */

.btn {
  font-family: var(--display); font-size: .7rem; letter-spacing: .06em;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: .65rem 1.1rem;
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--yolk); color: var(--void);
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.btn:hover  { background: var(--yolk-deep); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn--ghost {
  background: transparent; color: var(--rim); border-color: var(--edge);
}
.btn--ghost:hover { background: var(--pan-lit); color: var(--cream); border-color: var(--rim); }

.btn--quiet {
  background: transparent; color: var(--rim); border-color: transparent;
  padding-inline: var(--s2);
}
.btn--quiet:hover { color: var(--cream); background: transparent; text-decoration: underline; }

.btn--lg   { padding: .9rem 1.6rem; font-size: .8rem; }
.btn--full { width: 100%; }

/* =================================================================
   Forms
   ================================================================= */

.field { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }

.label {
  font-family: var(--display); font-size: .64rem; letter-spacing: .1em;
  color: var(--butter); text-transform: uppercase;
}

.hint { font-size: .82rem; color: var(--rim); line-height: 1.5; }

.input, .textarea, .select {
  font-family: var(--pixel); font-size: 1rem;
  color: var(--cream); background: var(--void);
  border: 1px solid var(--edge); border-radius: var(--radius);
  padding: .7rem .8rem;
  width: 100%;
  transition: border-color .15s ease, background .15s ease;
}
.input:hover, .textarea:hover { border-color: var(--rim); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--yolk); background: var(--pan);
  box-shadow: var(--ring);
}
.textarea { resize: vertical; min-height: 5rem; line-height: 1.55; }
.input::placeholder, .textarea::placeholder { color: #4A4560; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }

/* --- sprite picker: radio buttons wearing card clothes ------------- */

.sprites {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--s3); border: 0; padding: 0; margin: 0 0 var(--s4);
}

.sprite-option { position: relative; }
.sprite-option input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.sprite-option span {
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  padding: var(--s3);
  border: 1px solid var(--edge); border-radius: var(--radius);
  background: var(--pan);
  font-family: var(--display); font-size: .58rem; letter-spacing: .08em;
  color: var(--rim); text-transform: uppercase;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.sprite-option img { width: 3.4rem; height: 3.4rem; image-rendering: pixelated; }
.sprite-option input:hover + span { border-color: var(--rim); color: var(--cream); }
.sprite-option input:checked + span {
  border-color: var(--yolk); color: var(--yolk); background: var(--yolk-dim);
}
.sprite-option input:focus-visible + span { box-shadow: var(--ring); }

/* --- repeatable step / ingredient rows ----------------------------- */

.repeat-row {
  display: flex; align-items: flex-start; gap: var(--s2); margin-bottom: var(--s2);
}
.repeat-row__no {
  font-family: var(--display); font-size: .68rem; color: var(--butter);
  padding-top: .85rem; min-width: 1.8rem; text-align: right; flex: none;
}
.repeat-row .input, .repeat-row .textarea { flex: 1; }
.repeat-row__remove {
  background: transparent; border: 1px solid var(--edge); color: var(--rim);
  border-radius: var(--radius); cursor: pointer;
  width: 2.1rem; height: 2.6rem; flex: none;
  font-size: 1.1rem; line-height: 1;
  transition: color .15s ease, border-color .15s ease;
}
.repeat-row__remove:hover { color: var(--chili); border-color: var(--chili); }

/* =================================================================
   Messages
   ================================================================= */

.alert {
  border: 1px solid var(--chili); border-left-width: 3px;
  background: rgba(224, 83, 61, .08);
  padding: var(--s3) var(--s4); border-radius: var(--radius);
  margin-bottom: var(--s5); font-size: .92rem;
}
.alert ul { margin: 0; padding-left: 1.1rem; }
.alert li + li { margin-top: var(--s1); }

/* =================================================================
   Cards + browse grid
   ================================================================= */

main { flex: 1; padding-block: var(--s7) var(--s8); }

.page-head { margin-bottom: var(--s6); }

.eyebrow {
  font-family: var(--display); font-size: .64rem; letter-spacing: .18em;
  color: var(--butter); text-transform: uppercase; margin-bottom: var(--s3);
}

h1 { font-family: var(--display); font-size: clamp(1.5rem, 3.6vw, 2.4rem); line-height: 1.25; font-weight: 400; }
h2 { font-family: var(--display); font-size: 1rem; letter-spacing: .04em; font-weight: 400; }

.lede { color: var(--rim); font-size: 1.02rem; max-width: 56ch; margin-top: var(--s3); }

/* --- filter bar ---------------------------------------------------- */

.toolbar {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
  padding-bottom: var(--s5); margin-bottom: var(--s6);
  border-bottom: 1px solid var(--edge);
}
.toolbar form { display: flex; gap: var(--s2); flex: 1; min-width: 15rem; }
.toolbar .input { font-size: .95rem; }

.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip {
  font-family: var(--display); font-size: .58rem; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none;
  color: var(--rim); background: var(--pan);
  border: 1px solid var(--edge); border-radius: var(--radius);
  padding: .45rem .7rem;
  transition: color .15s ease, border-color .15s ease;
}
.chip:hover { color: var(--cream); border-color: var(--rim); }
.chip[aria-current] { color: var(--yolk); border-color: var(--yolk); background: var(--yolk-dim); }

/* --- the grid ------------------------------------------------------ */

.grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}

.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--pan);
  border: 1px solid var(--edge); border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--rim); transform: translateY(-2px); }
.card:focus-within { box-shadow: var(--ring); }

.card__art {
  position: relative;
  aspect-ratio: 3 / 2;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 55%, rgba(246,171,40,.16), transparent 62%), var(--void);
  border-bottom: 1px solid var(--edge);
}
.card__art img { width: 62%; image-rendering: pixelated; }

.card__body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }

.card__title { font-family: var(--pixel); font-size: 1.18rem; font-weight: 600; line-height: 1.3; }
.card__title a { color: var(--cream); text-decoration: none; }
/* Stretch the title link over the whole card so the entire card is clickable,
   while the accessibility tree still sees one normal link. */
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__title a { color: var(--yolk); }

.card__summary {
  font-size: .88rem; color: var(--rim); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.card__meta {
  margin-top: auto; padding-top: var(--s3);
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  font-family: var(--display); font-size: .56rem; letter-spacing: .06em;
  color: var(--rim); text-transform: uppercase;
}
.card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--edge); }

/* --- empty state --------------------------------------------------- */

.empty {
  border: 1px dashed var(--edge); border-radius: var(--radius);
  padding: var(--s8) var(--s5); text-align: center;
  color: var(--rim);
}
.empty h2 { color: var(--cream); margin-bottom: var(--s3); }
.empty p  { max-width: 40ch; margin: 0 auto var(--s5); }

/* =================================================================
   Auth + narrow form pages
   ================================================================= */

.panel {
  width: min(27rem, 100%); margin-inline: auto;
  background: var(--pan); border: 1px solid var(--edge);
  border-radius: var(--radius); padding: var(--s6);
}
.panel--wide { width: min(44rem, 100%); }
.panel__head { margin-bottom: var(--s5); }
.panel__foot {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--edge);
  font-size: .88rem; color: var(--rim);
}

/* =================================================================
   Recipe detail
   ================================================================= */

.recipe-hero {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: var(--s7); align-items: center; margin-bottom: var(--s7);
}
.recipe-hero__art {
  aspect-ratio: 1; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(246,171,40,.20), transparent 65%);
}
.recipe-hero__art img { width: 82%; image-rendering: pixelated; }

.stats { display: flex; gap: var(--s5); flex-wrap: wrap; margin: var(--s5) 0; }
.stat__label {
  font-family: var(--display); font-size: .56rem; letter-spacing: .1em;
  color: var(--rim); text-transform: uppercase;
}
.stat__value { font-family: var(--pixel); font-size: 1.3rem; color: var(--cream); }

.columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s7); }

.section-title {
  font-family: var(--display); font-size: .68rem; letter-spacing: .12em;
  color: var(--butter); text-transform: uppercase;
  padding-bottom: var(--s3); margin-bottom: var(--s4);
  border-bottom: 1px solid var(--edge);
}

.ingredients { list-style: none; }
.ingredients li {
  font-family: var(--pixel); font-size: 1rem;
  padding: var(--s3) 0; border-bottom: 1px solid var(--edge);
  display: flex; gap: var(--s3);
}
.ingredients li::before { content: "▪"; color: var(--butter); flex: none; }

.steps { list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--s3);
  padding: var(--s4) 0; border-bottom: 1px solid var(--edge);
}
.steps li::before {
  content: counter(step);
  font-family: var(--display); font-size: .8rem; color: var(--yolk);
  padding-top: .15rem;
}
.steps li p { font-family: var(--pixel); font-size: 1.05rem; line-height: 1.6; }

/* =================================================================
   Footer
   ================================================================= */

.footer {
  border-top: 1px solid var(--edge); background: var(--pan);
  padding-block: var(--s5); margin-top: auto;
  font-family: var(--display); font-size: .6rem; letter-spacing: .06em;
  color: var(--rim);
}
.footer__inner { display: flex; gap: var(--s4); flex-wrap: wrap; align-items: center; }
.footer a { color: var(--rim); text-decoration: none; }
.footer a:hover { color: var(--cream); }

/* =================================================================
   Responsive
   ================================================================= */

@media (max-width: 860px) {
  .recipe-hero { grid-template-columns: 1fr; gap: var(--s5); }
  .recipe-hero__art { max-width: 15rem; margin-inline: auto; }
  .columns { grid-template-columns: 1fr; gap: var(--s6); }
  .row { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .masthead__inner { flex-wrap: wrap; gap: var(--s2); }
  .nav {
    width: 100%; margin-left: 0; gap: var(--s1);
    justify-content: flex-start; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;   /* scroll rather than stack */
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav__link, .nav .btn { font-size: .58rem; padding-inline: var(--s2); }
  .nav__user { padding-left: var(--s2); border-left: 0; font-size: .56rem; margin-left: auto; }
  main { padding-block: var(--s5) var(--s6); }
  .btn--lg { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =================================================================
   Utilities
   These exist so no template needs an inline style attribute, which
   the Content-Security-Policy blocks outright.
   ================================================================= */

.push-right { margin-left: auto; }
.stack-sm   { margin-top: .75rem; }
.stack-lg   { margin-top: 2rem; }
.legend-gap { margin-bottom: .5rem; }

.form-actions {
  margin-top: 2.5rem;
  display: flex; gap: .75rem; flex-wrap: wrap;
}

/* =================================================================
   Sessions page
   ================================================================= */

.session-list { list-style: none; }
.session-list li {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s4) 0; border-bottom: 1px solid var(--edge);
}
.session-list__what { font-family: var(--pixel); font-size: 1.05rem; }
.session-list__when {
  font-family: var(--display); font-size: .56rem; letter-spacing: .06em;
  color: var(--rim); text-transform: uppercase;
}
.badge {
  font-family: var(--display); font-size: .54rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--yolk);
  border: 1px solid var(--yolk); background: var(--yolk-dim);
  border-radius: var(--radius); padding: .2rem .45rem;
}

/* =================================================================
   Notices
   ================================================================= */

.notice {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  border: 1px solid var(--herb); border-left-width: 3px;
  background: rgba(111, 174, 107, .08);
  padding: var(--s3) var(--s4); border-radius: var(--radius);
  margin-bottom: var(--s5); font-size: .92rem;
}
.notice--warn {
  border-color: var(--butter);
  background: rgba(178, 137, 58, .10);
}
.notice__action { margin-left: auto; }

/* Destructive actions look destructive. */
.btn--danger {
  background: transparent; color: var(--chili); border-color: var(--chili);
}
.btn--danger:hover { background: var(--chili); color: var(--void); }

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.report-row {
  display: flex; gap: var(--s2); align-items: center;
  margin: 0 0 var(--s6); max-width: 32rem;
}