/* nekolas.dev /code/ — source viewer styles.
   Shares the blog's "Clean Editorial" design tokens so it reads as one site. */

:root {
  --nk-bg:#f3f4f3; --nk-surface:#ffffff; --nk-fg:#0e0e0e; --nk-fg2:#6b6d6b;
  --nk-line:#d9dad8; --nk-accent:#ff3b30; --nk-ink:#0e0e0e;
  --nk-code-bg:#ffffff;
}
html.dark {
  --nk-bg:#0c0d0d; --nk-surface:#161817; --nk-fg:#eef0ee; --nk-fg2:#8b8e8b;
  --nk-line:#272a28; --nk-accent:#ff5a4d; --nk-ink:#eef0ee;
  --nk-code-bg:#0e1011;
}

* { box-sizing: border-box; }
html, body { margin:0; background:var(--nk-bg); color:var(--nk-fg); }
body {
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased;
  transition:background .4s, color .4s;
}
a { color:inherit; }
code, pre, .cv-mono { font-family:'IBM Plex Mono', ui-monospace, monospace; }
::selection { background:var(--nk-accent); color:#fff; }

.cv-shell { max-width:1180px; margin:0 auto; padding:0 28px; width:100%; }

/* ---- masthead (mirrors blog) ------------------------------------------- */
.nk-masthead {
  position:sticky; top:0; z-index:30;
  border-bottom:1.5px solid var(--nk-ink);
  background:color-mix(in srgb, var(--nk-bg) 92%, transparent);
  backdrop-filter:blur(8px);
}
.nk-navin { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:13px 28px; max-width:1180px; }
.nk-brand { font-weight:700; font-size:1.15rem; letter-spacing:-.02em; color:var(--nk-fg); text-decoration:none; white-space:nowrap; }
.nk-brand span { color:var(--nk-accent); }
.nk-navlinks { display:flex; gap:1.4rem; align-items:center; }
.nk-navlinks a { text-decoration:none; font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--nk-fg); transition:color .2s; }
.nk-navlinks a:hover, .cv-navactive { color:var(--nk-accent) !important; }
.cv-theme { background:none; border:1px solid var(--nk-line); color:var(--nk-fg); width:30px; height:30px; border-radius:4px; cursor:pointer; font-size:.9rem; line-height:1; transition:border-color .2s, color .2s; }
.cv-theme:hover { border-color:var(--nk-accent); color:var(--nk-accent); }

.cv-main { padding:36px 28px 80px; min-height:60vh; }

/* ---- breadcrumb -------------------------------------------------------- */
.cv-crumb { font-family:'IBM Plex Mono', monospace; font-size:.86rem; margin-bottom:22px; color:var(--nk-fg2); display:flex; flex-wrap:wrap; align-items:center; gap:.1rem; }
.cv-crumb a { color:var(--nk-fg); text-decoration:none; }
.cv-crumb a:hover { color:var(--nk-accent); }
.cv-crumb i { font-style:normal; color:var(--nk-fg2); margin:0 .45rem; }
.cv-crumb span:last-child { color:var(--nk-fg2); }

/* ---- index hero + cards ------------------------------------------------ */
.cv-hero { padding:5vh 0 4vh; border-bottom:1.5px solid var(--nk-ink); margin-bottom:42px; }
.cv-hero-kicker { font-size:.72rem; font-weight:700; letter-spacing:.18em; color:var(--nk-fg2); text-transform:uppercase; }
.cv-hero-title { font-weight:700; font-size:clamp(2.6rem,8vw,4.6rem); line-height:1; letter-spacing:-.03em; margin:.4rem 0 0; }
.cv-hero-lede { color:var(--nk-fg2); font-size:1.05rem; max-width:46ch; margin:1.2rem 0 0; }

.cv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:18px; }
.cv-card { display:flex; flex-direction:column; gap:.7rem; padding:22px; border:1px solid var(--nk-line); border-radius:8px; background:var(--nk-surface); text-decoration:none; color:inherit; transition:border-color .2s, transform .2s; }
.cv-card:hover { border-color:var(--nk-accent); transform:translateY(-2px); }
.cv-card-top { display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; }
.cv-card-top h2 { margin:0; font-size:1.25rem; font-weight:700; letter-spacing:-.01em; overflow-wrap:anywhere; line-height:1.2; }
.cv-card-branch, .cv-card-foot, .cv-card-langs { font-family:'IBM Plex Mono', monospace; }
.cv-card-branch { font-size:.72rem; color:var(--nk-fg2); white-space:nowrap; }
.cv-card-desc { margin:0; color:var(--nk-fg2); font-size:.92rem; line-height:1.55; flex:1; }
.cv-card-langs { display:flex; flex-wrap:wrap; gap:.4rem; }
.cv-chip { display:inline-flex; align-items:center; gap:.32rem; font-size:.7rem; color:var(--nk-fg2); border:1px solid var(--nk-line); border-radius:99px; padding:.1rem .5rem; }
.cv-chip i, .cv-langlegend i { width:.62rem; height:.62rem; border-radius:99px; display:inline-block; }
.cv-card-foot { display:flex; flex-wrap:wrap; gap:.9rem; font-size:.72rem; color:var(--nk-fg2); border-top:1px solid var(--nk-line); padding-top:.7rem; }

/* ---- repo head --------------------------------------------------------- */
.cv-repohead, .cv-dirhead { border-bottom:1.5px solid var(--nk-ink); padding-bottom:18px; margin-bottom:18px; }
.cv-repotitle { font-weight:700; font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:-.025em; margin:0; }
.cv-dirpath { color:var(--nk-fg2); font-family:'IBM Plex Mono', monospace; font-size:.6em; font-weight:500; }
.cv-repodesc { color:var(--nk-fg2); margin:.7rem 0 0; max-width:70ch; }
.cv-repometa { display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; margin-top:1rem; font-family:'IBM Plex Mono', monospace; font-size:.8rem; color:var(--nk-fg2); }
.cv-repometa b { color:var(--nk-fg); }
.cv-repometa a { color:var(--nk-accent); text-decoration:none; }
.cv-branch { color:var(--nk-fg2); }

/* ---- language bar ------------------------------------------------------ */
.cv-langbar { display:flex; height:8px; border-radius:99px; overflow:hidden; margin-top:1.1rem; background:var(--nk-line); }
.cv-langbar span { height:100%; }
.cv-langlegend { display:flex; flex-wrap:wrap; gap:1rem; margin-top:.7rem; font-size:.74rem; color:var(--nk-fg2); }
.cv-langlegend span { display:inline-flex; align-items:center; gap:.35rem; }

/* ---- clone / download panel -------------------------------------------- */
.cv-clone { display:flex; flex-direction:column; gap:.6rem; margin:0 0 20px; padding:14px 16px; border:1px solid var(--nk-line); border-radius:8px; background:var(--nk-surface); }
.cv-clone-row { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.cv-clone-label { font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--nk-fg2); width:74px; flex:none; }
.cv-clone-url { flex:1; min-width:220px; font-family:'IBM Plex Mono', monospace; font-size:.82rem; background:var(--nk-bg); border:1px solid var(--nk-line); border-radius:5px; padding:.4rem .6rem; overflow-x:auto; white-space:nowrap; }
.cv-copy, .cv-dlbtn { font-size:.72rem; font-weight:600; letter-spacing:.03em; text-decoration:none; color:var(--nk-fg); border:1px solid var(--nk-line); padding:.35rem .7rem; border-radius:5px; background:none; cursor:pointer; white-space:nowrap; transition:border-color .2s, color .2s; }
.cv-copy:hover, .cv-dlbtn:hover { border-color:var(--nk-accent); color:var(--nk-accent); }
.cv-copy.cv-copied { border-color:var(--nk-accent); color:var(--nk-accent); }
.cv-clone-note { font-size:.72rem; color:var(--nk-fg2); }

/* ---- file/dir listing -------------------------------------------------- */
.cv-listing { border:1px solid var(--nk-line); border-radius:8px; overflow:hidden; background:var(--nk-surface); }
.cv-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 1rem; text-decoration:none; color:inherit; border-bottom:1px solid var(--nk-line); transition:background .15s; }
.cv-row:last-child { border-bottom:none; }
.cv-row:hover { background:var(--nk-bg); }
.cv-row-name { display:flex; align-items:center; gap:.6rem; font-family:'IBM Plex Mono', monospace; font-size:.9rem; min-width:0; }
.cv-row-name span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-row:hover .cv-row-name span:last-child { color:var(--nk-accent); }
.cv-row-meta { font-family:'IBM Plex Mono', monospace; font-size:.75rem; color:var(--nk-fg2); white-space:nowrap; }
.cv-ic { flex:none; }
.cv-ic-dir { color:#6b9bd1; }
.cv-ic-file { color:var(--nk-fg2); }

/* ---- file view --------------------------------------------------------- */
.cv-filehead { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem .9rem; border:1px solid var(--nk-line); border-bottom:none; border-radius:8px 8px 0 0; background:var(--nk-surface); }
.cv-filemeta { font-family:'IBM Plex Mono', monospace; font-size:.78rem; color:var(--nk-fg2); }
.cv-rawbtn { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; text-decoration:none; color:var(--nk-fg); border:1px solid var(--nk-line); padding:.2rem .6rem; border-radius:4px; }
.cv-rawbtn:hover { border-color:var(--nk-accent); color:var(--nk-accent); }
.cv-code { border:1px solid var(--nk-line); border-radius:0 0 8px 8px; overflow:auto; background:var(--nk-code-bg); }

/* shiki dual-theme: drive colors via CSS vars set by defaultColor:false */
.cv-code .shiki, .cv-code .shiki span { background-color:transparent !important; color:var(--shiki-light); }
html.dark .cv-code .shiki, html.dark .cv-code .shiki span { color:var(--shiki-dark) !important; }
.cv-code pre.shiki { margin:0; padding:14px 0; font-size:.82rem; line-height:1.6; overflow:visible; }
.cv-code pre.shiki code { display:block; counter-reset:l; min-width:max-content; }
.cv-code pre.shiki .line { display:inline-block; width:100%; padding:0 18px 0 0; }
.cv-code pre.shiki .line::before {
  counter-increment:l; content:counter(l);
  display:inline-block; width:3.2em; margin-right:1.4em; padding-right:.8em;
  text-align:right; color:var(--nk-fg2); opacity:.55;
  border-right:1px solid var(--nk-line); user-select:none;
}
.cv-code pre.shiki .line:hover { background:color-mix(in srgb, var(--nk-accent) 8%, transparent); }

/* ---- commits ----------------------------------------------------------- */
.cv-commits { border:1px solid var(--nk-line); border-radius:8px; overflow:hidden; background:var(--nk-surface); }
.cv-commit { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 1rem; border-bottom:1px solid var(--nk-line); }
.cv-commit:last-child { border-bottom:none; }
.cv-commit-main { min-width:0; }
.cv-commit-subj { display:block; font-weight:600; font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-commit-sub { font-size:.74rem; color:var(--nk-fg2); }
.cv-commit-hash { font-size:.74rem; color:var(--nk-fg2); border:1px solid var(--nk-line); padding:.1rem .45rem; border-radius:4px; white-space:nowrap; }

/* ---- readme / prose ---------------------------------------------------- */
.cv-readme { margin-top:34px; border:1px solid var(--nk-line); border-radius:8px; overflow:hidden; background:var(--nk-surface); }
.cv-readme-h { padding:.6rem 1rem; border-bottom:1px solid var(--nk-line); font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--nk-fg2); }
.cv-prose { padding:24px 28px; }
.cv-prose > :first-child { margin-top:0; }
.cv-prose h1, .cv-prose h2, .cv-prose h3 { letter-spacing:-.01em; line-height:1.25; margin:1.6em 0 .6em; }
.cv-prose h1 { font-size:1.7rem; border-bottom:1px solid var(--nk-line); padding-bottom:.3em; }
.cv-prose h2 { font-size:1.35rem; border-bottom:1px solid var(--nk-line); padding-bottom:.25em; }
.cv-prose h3 { font-size:1.12rem; }
.cv-prose a { color:var(--nk-accent); text-decoration:none; }
.cv-prose a:hover { text-decoration:underline; }
.cv-prose p, .cv-prose ul, .cv-prose ol { margin:.8em 0; }
.cv-prose code { background:var(--nk-bg); border:1px solid var(--nk-line); border-radius:4px; padding:.1em .35em; font-size:.86em; }
.cv-prose pre { background:var(--nk-code-bg); border:1px solid var(--nk-line); border-radius:8px; padding:14px 16px; overflow:auto; }
.cv-prose pre code { background:none; border:none; padding:0; }
.cv-prose img { max-width:100%; height:auto; }
.cv-prose blockquote { border-left:3px solid var(--nk-line); margin:1em 0; padding:.2em 1em; color:var(--nk-fg2); }
.cv-prose table { border-collapse:collapse; width:100%; font-size:.9rem; }
.cv-prose th, .cv-prose td { border:1px solid var(--nk-line); padding:.4em .7em; text-align:left; }

/* ---- notices / footer -------------------------------------------------- */
.cv-notice { padding:2rem; border:1px dashed var(--nk-line); border-radius:8px; color:var(--nk-fg2); text-align:center; }
.cv-notice code { background:var(--nk-surface); padding:.1em .4em; border-radius:4px; }
.cv-foot { border-top:1.5px solid var(--nk-ink); padding:22px 0; font-size:.74rem; color:var(--nk-fg2); }
.cv-foot .cv-shell { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; }
.cv-foot a { color:var(--nk-fg); text-decoration:none; }
.cv-foot a:hover { color:var(--nk-accent); }

@media (max-width:640px) {
  .cv-navlinks { gap:.9rem; }
  .nk-navlinks a { font-size:.7rem; }
  .cv-repometa { gap:.8rem; }
}