/* Shared site components. Loaded on every page via _layouts/default.html.
   Keep house style here so all pages (and all four contribution pathways)
   inherit the same look. See docs/style-checklist.md. */

/* Asterisk buttons — pill link buttons, lifted from the media kit
   (brand/index.html: .bk-btn-primary / -ghost / -invert).
   Use via: {% include button.html text="…" href="…" variant="primary" %} */
.a-btn {
  display: inline-block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  border-radius: 999px;          /* pill */
  padding: 14px 24px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.a-btn-primary { color: #fff; background: #000; }
.a-btn-primary:hover { background: #492ae8; color: #fff; }   /* brand purple */

.a-btn-ghost { color: #000; background: #fff; border-color: #ddd; }
.a-btn-ghost:hover { border-color: #000; color: #000; }

.a-btn-invert { color: #000; background: #fff; padding: 15px 26px; }
.a-btn-invert:hover { background: #c4ffc2; color: #000; }    /* brand mint */

/* A row of buttons with consistent spacing. */
.a-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Fallback: kramdown wraps each bare button include in its own <p>, which would
   stack them vertically. Lay consecutive button-only paragraphs out as a row
   automatically, so a page that forgets .a-btn-row still reads right. */
.project-desc p:has(> a.a-btn:only-child) { display: inline-block; margin: 0 10px 10px 0; }

/* Author's brief for missing copy. A human fills these in; never generated
   prose. Greppable before merge: search "needs-copy". See the add-page skill. */
.needs-copy {
  display: block;
  border: 2px dashed #492ae8;              /* brand purple */
  background: rgba(73, 42, 232, 0.06);
  color: #492ae8;
  border-radius: 10px;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: .95rem;
  font-style: italic;
}

/* Code in detail pages — Markdown ``` fences (Rouge-highlighted). Dark panel on
   the white .project-desc; inline code in brand indigo. */
.project-desc .highlight {
  background: #0f1420;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 18px 0;
  overflow-x: auto;
}
.project-desc .highlight pre,
.project-desc .highlight code {
  margin: 0;
  background: none;
  color: #d6deeb;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .92rem;
  line-height: 1.55;
}
.project-desc :not(pre) > code {
  background: #eceaf6;
  color: #492ae8;
  padding: 2px 6px;
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .88em;
}
/* Rouge token palette (subset) — Night Owl-ish */
.project-desc .highlight .c,
.project-desc .highlight .c1,
.project-desc .highlight .cm { color: #637777; font-style: italic; }
.project-desc .highlight .k,
.project-desc .highlight .kn,
.project-desc .highlight .kd { color: #c792ea; }
.project-desc .highlight .s,
.project-desc .highlight .s1,
.project-desc .highlight .s2,
.project-desc .highlight .sb { color: #c3e88d; }
.project-desc .highlight .mi,
.project-desc .highlight .mf,
.project-desc .highlight .m { color: #f78c6c; }
.project-desc .highlight .nf { color: #82aaff; }
.project-desc .highlight .nb { color: #ffcb6b; }
.project-desc .highlight .o,
.project-desc .highlight .p { color: #7fdbca; }

/* Tables in detail pages */
.project-desc table { border-collapse: collapse; width: 100%; margin: 22px 0; font-size: 15px; }
.project-desc thead th { text-align: left; padding: 10px 14px; border-bottom: 2px solid #492ae8; font-weight: 700; color: #000; white-space: nowrap; }
.project-desc tbody td { padding: 10px 14px; border-bottom: 1px solid #e7e7e3; vertical-align: top; }
.project-desc tbody tr:last-child td { border-bottom: none; }
.project-desc tbody tr:hover { background: rgba(73, 42, 232, 0.04); }
.project-desc table a { color: #492ae8; font-weight: 600; }

/* YouTube thumbnail with play overlay */
.yt-thumb { position: relative; display: block; max-width: 560px; border-radius: 12px; overflow: hidden; border: 1px solid #e7e7e3; line-height: 0; }
.yt-thumb img { width: 100%; display: block; }
.yt-thumb .yt-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 46px; color: #fff; background: rgba(0,0,0,0.22); transition: background 0.15s ease; }
.yt-thumb:hover .yt-play { background: rgba(73,42,232,0.38); }