/* ==========================================================================
   Leapdeck. leapdeck.app/recipes

   The recipes page sits on the .prose column the legal pages and the blog
   use (site.css) and adds what only it has: the contents strip, the recipe
   blocks, the copyable snippets and the table of links. Loaded after
   site.css, from recipes.astro, so it leans on the same tokens.

   No inline styles anywhere, for the Content-Security-Policy. The Copy
   buttons are site.js's [data-copy], and Umami counts their clicks through
   their data-umami-event attributes, so this file only draws them.
   ========================================================================== */

.recipes .prose__meta { margin-top: 18px; }

/* Inline code, as the home page's FAQ draws it (sections.css is not loaded
   here). */
.recipes code {
  font: 500 0.92em ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  overflow-wrap: anywhere;
}

/* ---- Contents: one pill per recipe ---- */
.recipes .recipes__toc {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.recipes .recipes__toc li { margin: 0; }

.recipes .recipes__toc a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  transition: border-color 220ms var(--ease), color 220ms var(--ease);
}

.recipes .recipes__toc a:hover { border-color: var(--line-strong); color: var(--ink); }

/* ---- One recipe ---- */
.recipe {
  margin-top: clamp(36px, 30px + 1.6vw, 52px);
  padding-top: clamp(28px, 24px + 1vw, 36px);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 110px;
}

.recipes .recipe h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.recipes .recipe h2 svg { flex: none; color: var(--ink-3); }

.recipes .recipe__what {
  margin: 6px 0 0;
  font-size: 16.5px;
  color: var(--ink-3);
}

.recipes .recipe ol {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.recipes .recipe ol > li {
  position: relative;
  margin-top: 12px;
  padding-left: 40px;
  counter-increment: step;
}

.recipes .recipe ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.recipe__note {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

.recipes .recipe__note p { margin: 0; font-size: 15px; line-height: 1.6; }

.recipes .recipe__note p + p { margin-top: 8px; }

/* ---- A snippet to copy: a link, a command, a block of settings ---- */
.snippet {
  margin: 14px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.snippet pre {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 8px 0;
  overflow-x: auto;
  font: 500 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
  white-space: pre;
  scrollbar-width: thin;
}

/* A phone wraps a long line rather than hiding its end. The Copy button
   copies the text as written either way. */
@media (max-width: 599px) {
  .snippet pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}

.snippet button {
  flex: none;
  height: 36px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms;
}

.snippet button:hover { background: var(--tile); }

/* ---- Every link ---- */
.linktable {
  width: 100%;
  margin-top: 18px;
  border-collapse: collapse;
  font-size: 15.5px;
  line-height: 1.55;
}

.linktable th,
.linktable td {
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
  color: var(--ink-2);
}

.linktable th {
  width: 42%;
  padding-right: 18px;
  font-weight: 500;
}

.linktable thead th {
  border-top: 0;
  padding-top: 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 599px) {
  .linktable thead { display: none; }
  .linktable tr { display: block; padding: 12px 0; border-top: 1px solid var(--line-soft); }
  .linktable th,
  .linktable td { display: block; width: auto; padding: 0; border: 0; }
  .linktable td { margin-top: 6px; }
}

/* ---- Asking for a plug-in ---- */
.recipes .asks {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.recipes .asks li { margin: 0; }

.recipes .asks a {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  border-radius: 21px;
  border: 1px solid var(--line-strong);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 200ms;
}

.recipes .asks a:hover { background: var(--surface-2); }