/* Sleep & EEG analysis code gallery (/shdc/code/).
   Dark, scoped under .shdc.shdc-code. Design tokens, .wrap, .eyebrow and
   buttons come from shdc.css, which is loaded before this file. */

.shdc.shdc-code { background: var(--shdc-night); color: #E6ECF3; min-height: 100vh; }
.shdc-code a { color: #CFE0EA; }

/* ---- header ---- */
.shdc-code .code-hero { padding: 34px 0 26px; border-bottom: 1px solid #1C2E45; }
.shdc-code .code-back { display: inline-block; font-family: var(--shdc-font-mono); font-size: .8rem; color: #8CA0B8; text-decoration: none; margin-bottom: 18px; }
.shdc-code .code-back:hover { color: #fff; }
.shdc-code h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 6px 0 12px; }
.shdc-code .code-lead { color: #B9C6D6; font-size: 1.08rem; line-height: 1.6; max-width: 72ch; }

/* ---- sticky toolbar: search + category chips ---- */
.shdc-code .code-toolbar { position: sticky; top: 0; z-index: 20; background: rgba(14, 26, 43, .93); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid #1C2E45; padding: 14px 0; }
.shdc-code .code-search { position: relative; }
.shdc-code .code-search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #6F829A; pointer-events: none; }
.shdc-code .code-search input { width: 100%; box-sizing: border-box; background: #0A1524; border: 1px solid #2A3E59; color: #E6ECF3; font: 1rem var(--shdc-font-body); padding: 12px 14px 12px 42px; border-radius: 10px; }
.shdc-code .code-search input::placeholder { color: #6F829A; }
.shdc-code .code-search input:focus { outline: none; border-color: var(--shdc-signal); box-shadow: 0 0 0 3px rgba(95, 183, 196, .22); }

.shdc-code .code-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.shdc-code .chip { font-family: var(--shdc-font-body); font-size: .86rem; color: #B9C6D6; background: #132339; border: 1px solid #2A3E59; border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.shdc-code .chip:hover { border-color: var(--shdc-signal); color: #fff; }
.shdc-code .chip:focus-visible { outline: 3px solid var(--shdc-dawn); outline-offset: 2px; }
.shdc-code .chip.is-active { background: var(--shdc-dawn); border-color: var(--shdc-dawn); color: #3A2403; font-weight: 600; }
.shdc-code .code-count { font-family: var(--shdc-font-mono); font-size: .76rem; color: #6F829A; margin: 10px 0 0; }

/* ---- categories ---- */
.shdc-code .code-body { padding: 8px 0 20px; }
.shdc-code .code-cat { padding-top: 34px; scroll-margin-top: 160px; }
.shdc-code .code-cat-head { display: flex; align-items: baseline; gap: 12px; }
.shdc-code .code-cat-head h2 { color: #fff; font-size: 1.4rem; margin: 0; }
.shdc-code .code-cat-n { color: var(--shdc-dawn); font-size: .9rem; }
.shdc-code .code-cat-desc { color: #8CA0B8; font-size: .95rem; margin: 6px 0 0; max-width: 78ch; }

/* ---- card grid ---- */
.shdc-code .code-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); margin-top: 18px; }
.shdc-code .code-card { position: relative; display: flex; flex-direction: column; background: #13233A; border: 1px solid #243750; border-radius: 12px; padding: 18px 18px 16px; transition: transform .1s ease, border-color .12s ease, background .12s ease; }
.shdc-code .code-card:hover { transform: translateY(-2px); border-color: var(--shdc-signal); background: #162A44; }
.shdc-code .code-card.is-flagship { border-color: #5A4320; background: linear-gradient(180deg, #1B2840, #141F33); }
.shdc-code .code-card.is-flagship:hover { border-color: var(--shdc-dawn); }
.shdc-code .code-feat { align-self: flex-start; font-family: var(--shdc-font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--shdc-dawn); background: #2E2410; border: 1px solid #5A4320; border-radius: 999px; padding: 2px 8px; margin-bottom: 8px; }
.shdc-code .code-card-title { color: #fff; font-family: var(--shdc-font-display); font-weight: 600; font-size: 1.14rem; line-height: 1.2; margin: 0; }
.shdc-code .code-repo { color: #6F829A; font-size: .74rem; margin: 3px 0 0; }
.shdc-code .code-blurb { color: #C4D0DD; font-size: .92rem; line-height: 1.5; margin: 10px 0 0; flex: 1 1 auto; }
.shdc-code .code-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.shdc-code .code-links { display: flex; gap: 12px; }
.shdc-code .code-link { font-family: var(--shdc-font-mono); font-size: .8rem; text-decoration: none; white-space: nowrap; }
/* suppress the site-wide external-link glyph (bdsp.css a[target=_blank]::after),
   which renders as tofu in the mono font; the arrow already signals the link */
.shdc-code a[target='_blank']::after { content: none; padding: 0; }
.shdc-code .code-link-code { color: var(--shdc-signal); }
.shdc-code .code-link-code:hover { color: #fff; text-decoration: underline; }
.shdc-code .code-link-data { color: var(--shdc-dawn); }
.shdc-code .code-link-data:hover { text-decoration: underline; }

/* ---- language badges ---- */
.shdc-code .lang-badge { font-family: var(--shdc-font-mono); font-size: .68rem; color: #B9C6D6; border-radius: 5px; padding: 2px 7px; border: 1px solid #2A3E59; white-space: nowrap; }
.shdc-code .lang-python { color: #9AD0E8; border-color: #2B5168; }
.shdc-code .lang-matlab { color: #F0A878; border-color: #5E3E28; }
.shdc-code .lang-jupyter-notebook { color: #F3A26B; border-color: #5E4328; }
.shdc-code .lang-r { color: #8FB7E8; border-color: #2E4868; }
.shdc-code .lang-html { color: #E88B6B; border-color: #5E3828; }
.shdc-code .lang-javascript { color: #E6D06A; border-color: #5E5424; }
.shdc-code .lang-tex { color: #9FB98F; border-color: #3E4E30; }

/* ---- empty state + footer ---- */
.shdc-code .code-empty { color: #B9C6D6; font-size: 1rem; padding: 36px 0; }
.shdc-code .code-clear { background: none; border: none; color: var(--shdc-dawn); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.shdc-code .code-foot { border-top: 1px solid #1C2E45; margin-top: 44px; padding: 28px 0 56px; }
.shdc-code .code-foot p { color: #8CA0B8; font-size: .9rem; line-height: 1.6; max-width: 82ch; }
.shdc-code .code-foot a { color: #CFE0EA; }

@media (max-width: 600px) {
  .shdc-code .code-grid { grid-template-columns: 1fr; }
  .shdc-code .code-hero { padding: 24px 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .shdc-code .code-card { transition: none; }
  .shdc-code .code-card:hover { transform: none; }
}