/* =====================================================================
   NutCrackersSecurity — violet terminal skin
   Isolated override loaded after the Chirpy theme CSS (via
   _includes/metadata-hook.html). Pure CSS, no Sass — a mistake here
   can never break the Jekyll build.
   Design: clean dark-violet, dotted grid, sharp-ish corners, tasteful
   rose/coral accents. Smooth — no scanlines, no glitch, no glow-spam.
   Keeps the pixel-alien mascot (bobbing) under the subtitle.
   Fonts: Chakra Petch (display) / JetBrains Mono (body + code).
   ===================================================================== */

:root {
  color-scheme: dark;

  /* ---- palette (violet) ---- */
  --hx-bg:       #0c0b14;   /* near-black indigo page bg          */
  --hx-bg2:      #110f1c;
  --hx-panel:    #14121f;   /* sidebar / cards                    */
  --hx-panel2:   #1b1830;
  --hx-code-bg:  #100e1c;   /* code block surface                 */
  --hx-code-hdr: #191531;   /* code header bar                    */

  --hx-violet:   #b98cff;   /* primary accent (was green)         */
  --hx-violet-2: #9a6cff;   /* deeper violet                      */
  --hx-violet-d: #221b3a;   /* deep violet tint (hover fills)     */
  --hx-heading:  #d9c8ff;   /* light lavender headings            */
  --hx-text:     #c3bdd6;   /* soft lavender-grey body            */

  --hx-rose:     #f27aa6;   /* links / warm accent (from ref)     */
  --hx-rose-d:   #7d3552;
  --hx-coral:    #ef8888;   /* coral highlight (from ref)         */
  --hx-cyan:     #6fc9e6;   /* info                               */
  --hx-cyan-d:   #2c5f70;
  --hx-amber:    #ffc857;
  --hx-red:      #ff6b7d;

  --hx-border:   #272041;   /* subtle violet border               */
  --hx-border2:  #3a2f5e;   /* brighter violet border             */
  --hx-muted:    #7d7599;   /* muted lavender                     */

  /* ---- syntax (Palenight-flavoured, violet-forward) ---- */
  --hx-syn-text: #cdd3ee;
  --hx-syn-com:  #6b7394;
  --hx-syn-key:  #c792ea;
  --hx-syn-str:  #ecc48d;
  --hx-syn-fn:   #82aaff;
  --hx-syn-num:  #f78c6c;

  /* ---- fonts ---- */
  --hx-font-display: 'Chakra Petch', ui-monospace, SFMono-Regular, monospace;
  --hx-font-body:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --hx-font-code:    'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* Retint every Chirpy theme token. Selector list wins over the theme's
   html[data-mode="dark"] rules (equal specificity, loaded later). */
html[data-mode="dark"],
html:not([data-mode="light"]),
html[data-mode="light"] {
  --main-bg: var(--hx-bg);
  --mask-bg: var(--hx-panel2);
  --main-border-color: var(--hx-border);
  --text-color: var(--hx-text);
  --text-muted-color: var(--hx-muted);
  --text-muted-hightlight-color: #b3abcc;
  --heading-color: var(--hx-heading);
  --label-color: var(--hx-violet);
  --blockquote-border-color: var(--hx-border2);
  --blockquote-text-color: #a49cc0;
  --link-color: var(--hx-rose);
  --link-underline-color: var(--hx-rose-d);
  --button-bg: var(--hx-panel2);
  --btn-border-color: var(--hx-border2);
  --btn-backtotop-color: var(--hx-violet);
  --btn-backtotop-border-color: var(--hx-border2);
  --btn-box-shadow: #000;
  --card-header-bg: var(--hx-panel2);
  --code-header-bg: var(--hx-code-hdr);
  --code-header-text-color: var(--hx-heading);
  --code-header-muted-color: var(--hx-border2);
  --checkbox-color: var(--hx-border2);
  --checkbox-checked-color: var(--hx-violet);
  --img-bg: radial-gradient(circle, #141024 0%, #0a0812 100%);
  --shimmer-bg: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(185,140,255,.10) 50%, rgba(0,0,0,0) 100%);
  --site-title-color: var(--hx-violet);
  --site-subtitle-color: var(--hx-muted);
  --sidebar-bg: var(--hx-panel);
  --sidebar-border-color: var(--hx-border);
  --sidebar-muted-color: var(--hx-muted);
  --sidebar-active-color: var(--hx-violet);
  --sidebar-hover-bg: #1a1630;
  --sidebar-btn-bg: var(--hx-panel2);
  --sidebar-btn-color: var(--hx-violet);
  --avatar-border-color: var(--hx-violet);
  --topbar-bg: rgba(12,11,20,.85);
  --topbar-text-color: var(--hx-text);
  --search-border-color: var(--hx-border2);
  --search-icon-color: var(--hx-violet);
  --input-focus-border-color: var(--hx-violet);
  --post-list-text-color: var(--hx-text);
  --btn-patinator-text-color: var(--hx-text);
  --btn-paginator-hover-color: var(--hx-violet-d);
  --toc-highlight: var(--hx-violet);
  --tag-hover: var(--hx-violet-d);
  --tb-odd-bg: #14121f;
  --tb-even-bg: #100e1a;
  --tb-border-color: var(--hx-border2);
  --footnote-target-bg: var(--hx-violet-2);
  --btn-share-color: var(--hx-muted);
  --btn-share-hover-color: var(--hx-violet);
  --card-bg: var(--hx-panel);
  --card-hovor-bg: var(--hx-panel2);
  --card-shadow: rgba(0,0,0,.55) 0 6px 18px 0, rgba(185,140,255,.10) 0 0 0 1px;
  --kbd-wrap-color: var(--hx-violet);
  --kbd-text-color: #ece4ff;
  --kbd-bg-color: #141024;
  --prompt-text-color: var(--hx-text);
  --prompt-tip-bg: rgba(185,140,255,.09);
  --prompt-tip-icon-color: var(--hx-violet);
  --prompt-info-bg: rgba(111,201,230,.09);
  --prompt-info-icon-color: var(--hx-cyan);
  --prompt-warning-bg: rgba(255,200,87,.10);
  --prompt-warning-icon-color: var(--hx-amber);
  --prompt-danger-bg: rgba(255,107,125,.10);
  --prompt-danger-icon-color: var(--hx-red);
  --tag-border: var(--hx-border2);
  --tag-shadow: #000;
  --dash-color: var(--hx-border2);
  --search-tag-bg: var(--hx-panel2);
  --categories-border: var(--hx-border);
  --categories-hover-bg: var(--hx-violet-d);
  --categories-icon-hover-color: var(--hx-violet);
  --timeline-node-bg: var(--hx-violet);
  --timeline-color: var(--hx-border2);
  --timeline-year-dot-color: var(--hx-violet);
}

/* =========================== base ================================= */

body {
  font-family: var(--hx-font-body);
  background-color: var(--hx-bg);
  /* subtle dotted grid — the "smooth" texture (à la thefewchosen) */
  background-image: radial-gradient(circle at 1px 1px, rgba(185,140,255,.055) 1px, transparent 0);
  background-size: 22px 22px;
  background-attachment: fixed;
}

/* comfortable reading column */
#core-wrapper {
  font-size: 1.02rem;
  line-height: 1.75;
}

::selection { background: var(--hx-violet); color: #120a1f; text-shadow: none; }

/* violet scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--hx-panel); }
::-webkit-scrollbar-thumb {
  background: var(--hx-border2);
  border: 2px solid var(--hx-panel);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--hx-violet-2); }
* { scrollbar-color: var(--hx-border2) var(--hx-panel); }

/* ========================= headings ============================== */
h1, h2, h3, h4,
.site-title, .post-title, #post-list .card-title {
  font-family: var(--hx-font-display) !important;
  letter-spacing: .2px;
  overflow-wrap: anywhere;
}
h1, .post-title { font-weight: 700; font-size: 1.72rem !important; line-height: 1.3; color: var(--hx-heading); }
h2 { font-size: 1.34rem !important; line-height: 1.35; font-weight: 600; margin-top: 2rem; }
h3 { font-size: 1.12rem !important; line-height: 1.4; font-weight: 600; }
h4, h5, h6 {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--hx-violet);
}

/* small violet tick before section headings (no glow — smooth) */
.content h2::before,
.content h3::before {
  content: "";
  display: inline-block;
  width: .34em; height: .34em;
  margin-right: .55em;
  background: var(--hx-violet);
  vertical-align: middle;
  transform: translateY(-.12em);
}

/* =========================== links =============================== */
.content a { transition: color .15s ease; text-underline-offset: 3px; }
.content a:hover { color: var(--hx-violet) !important; }

/* ========================== sidebar ============================== */
#sidebar {
  background: linear-gradient(180deg, #16132a 0%, #0d0b18 100%);
  border-right: 1px solid var(--hx-border);
}

/* avatar: soft square frame */
#avatar {
  border-radius: 8px !important;
  border: 1px solid var(--hx-border2) !important;
  box-shadow: 0 0 0 3px var(--hx-bg), 0 6px 20px rgba(0,0,0,.5);
}
#avatar img { border-radius: 8px !important; }

/* site title as a terminal prompt */
.site-title { font-size: 1.3rem !important; line-height: 1.4; font-weight: 700; }
.site-title a { color: var(--hx-violet) !important; text-shadow: 0 0 18px rgba(185,140,255,.35); }
.site-title a::before { content: "~$ "; color: var(--hx-violet-2); }
.site-title a::after  { content: "_"; color: var(--hx-violet); }

.site-subtitle {
  font-family: var(--hx-font-body);
  font-size: .82rem !important;
  color: var(--hx-muted) !important;
  font-style: normal !important;
  position: relative;
  padding-bottom: 46px;
}
.site-subtitle::before { content: "// "; color: var(--hx-border2); }

/* pixel-art space-invader mascot under the subtitle (violet) */
.site-subtitle::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 10px;
  width: 4px; height: 4px;
  transform: translateX(-22px);
  background: transparent;
  box-shadow:
    8px 0 0 var(--hx-violet), 32px 0 0 var(--hx-violet),
    12px 4px 0 var(--hx-violet), 28px 4px 0 var(--hx-violet),
    8px 8px 0 var(--hx-violet), 12px 8px 0 var(--hx-violet), 16px 8px 0 var(--hx-violet), 20px 8px 0 var(--hx-violet), 24px 8px 0 var(--hx-violet), 28px 8px 0 var(--hx-violet), 32px 8px 0 var(--hx-violet),
    4px 12px 0 var(--hx-violet), 8px 12px 0 var(--hx-violet), 16px 12px 0 var(--hx-violet), 20px 12px 0 var(--hx-violet), 24px 12px 0 var(--hx-violet), 32px 12px 0 var(--hx-violet), 36px 12px 0 var(--hx-violet),
    0 16px 0 var(--hx-violet), 4px 16px 0 var(--hx-violet), 8px 16px 0 var(--hx-violet), 12px 16px 0 var(--hx-violet), 16px 16px 0 var(--hx-violet), 20px 16px 0 var(--hx-violet), 24px 16px 0 var(--hx-violet), 28px 16px 0 var(--hx-violet), 32px 16px 0 var(--hx-violet), 36px 16px 0 var(--hx-violet), 40px 16px 0 var(--hx-violet),
    0 20px 0 var(--hx-violet), 8px 20px 0 var(--hx-violet), 12px 20px 0 var(--hx-violet), 16px 20px 0 var(--hx-violet), 20px 20px 0 var(--hx-violet), 24px 20px 0 var(--hx-violet), 28px 20px 0 var(--hx-violet), 32px 20px 0 var(--hx-violet), 40px 20px 0 var(--hx-violet),
    0 24px 0 var(--hx-violet), 8px 24px 0 var(--hx-violet), 32px 24px 0 var(--hx-violet), 40px 24px 0 var(--hx-violet),
    12px 28px 0 var(--hx-violet), 16px 28px 0 var(--hx-violet), 24px 28px 0 var(--hx-violet), 28px 28px 0 var(--hx-violet);
  filter: drop-shadow(0 0 6px rgba(185,140,255,.45));
}

/* terminal-menu nav */
#sidebar .nav-link {
  font-family: var(--hx-font-display);
  font-size: .82rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-radius: 6px;
  padding-left: 1.7rem;
  position: relative;
}
#sidebar .nav-link::before {
  content: ">";
  position: absolute;
  left: .7rem;
  color: var(--hx-violet-2);
  opacity: .55;
}
#sidebar .nav-link:hover { color: var(--hx-violet); }
#sidebar .nav-link:hover::before { opacity: 1; color: var(--hx-violet); }
#sidebar li.nav-item.active .nav-link {
  color: #120a1f !important;
  background: var(--hx-violet);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(154,108,255,.30);
}
#sidebar li.nav-item.active .nav-link::before { color: #120a1f; opacity: 1; }

.sidebar-bottom a:hover,
#sidebar .sidebar-bottom .mode-toggle:hover { color: var(--hx-violet) !important; }

/* ========================== topbar =============================== */
#topbar-wrapper { border-bottom: 1px solid var(--hx-border); backdrop-filter: blur(8px); }
#search-input { font-family: var(--hx-font-code); }

/* ===================== content: code ============================= */
.content code { font-family: var(--hx-font-code); font-size: .85em; }

/* inline code — subtle violet chip (not a heavy box) */
.content > p code,
.content li code,
.content a code,
.content td code,
.content h1 code, .content h2 code, .content h3 code {
  color: var(--hx-violet);
  background: rgba(185,140,255,.10);
  border: 1px solid var(--hx-border);
  border-radius: 5px;
  padding: .06rem .34rem;
}

/* --- fenced code: ONE clean frame on the wrapper; inner pres reset --- */
.content .highlighter-rouge {
  background: var(--hx-code-bg);
  border: 1px solid var(--hx-border2);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  overflow: hidden;
  font-family: var(--hx-font-code);
}
.content .highlighter-rouge .highlight {
  background: var(--hx-code-bg) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0;
}
.content .highlight pre,
.content .highlight pre.lineno {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0;
  color: var(--hx-syn-text);
  font-family: var(--hx-font-code);
}
.content .highlight > code { background: transparent; border: 0; padding: 0; }
/* line-number gutter */
.content .highlight td.rouge-gutter,
.content .highlight td.gutter { border-right: 1px solid var(--hx-border); }
.content .highlight pre.lineno { color: var(--hx-muted) !important; opacity: .5; }
/* standalone <pre> (rare: no rouge wrapper) */
.content > pre {
  background: var(--hx-code-bg);
  border: 1px solid var(--hx-border2);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  color: var(--hx-syn-text);
}

/* code header (language label + copy button + window dots) */
.content .code-header {
  background: var(--hx-code-hdr) !important;
  border-bottom: 1px solid var(--hx-border2);
  font-family: var(--hx-font-code);
}
.content .code-header button { color: var(--hx-muted); }
.content .code-header button:hover { color: var(--hx-violet); }
/* recolor the three window dots to the violet family (no green) */
.content .code-header::before {
  background-color: var(--hx-rose) !important;
  box-shadow: 1.25rem 0 0 var(--hx-amber), 2.5rem 0 0 var(--hx-violet) !important;
}

/* --- syntax palette (violet-forward; !important beats mode-scoped rules) --- */
.content .highlight .c, .content .highlight .cd, .content .highlight .cm,
.content .highlight .c1, .content .highlight .cs, .content .highlight .cp { color: var(--hx-syn-com) !important; font-style: italic; }
.content .highlight .k, .content .highlight .kd, .content .highlight .kn,
.content .highlight .kp, .content .highlight .kr, .content .highlight .kv { color: var(--hx-syn-key) !important; }
.content .highlight .kc, .content .highlight .kt { color: var(--hx-coral) !important; }
.content .highlight .s, .content .highlight .s1, .content .highlight .s2, .content .highlight .sb,
.content .highlight .sc, .content .highlight .sd, .content .highlight .se, .content .highlight .sh,
.content .highlight .si, .content .highlight .sx, .content .highlight .sr, .content .highlight .ss,
.content .highlight .dl { color: var(--hx-syn-str) !important; }
.content .highlight .nf, .content .highlight .fm { color: var(--hx-syn-fn) !important; }
.content .highlight .nc, .content .highlight .nn, .content .highlight .no { color: var(--hx-amber) !important; }
.content .highlight .nb, .content .highlight .bp { color: var(--hx-cyan) !important; }
.content .highlight .mi, .content .highlight .mf, .content .highlight .mh,
.content .highlight .mo, .content .highlight .il, .content .highlight .m { color: var(--hx-syn-num) !important; }
.content .highlight .o, .content .highlight .ow { color: var(--hx-cyan) !important; }
.content .highlight .na, .content .highlight .nt { color: var(--hx-coral) !important; }
.content .highlight .nv, .content .highlight .vi, .content .highlight .vg, .content .highlight .vc { color: var(--hx-rose) !important; }
.content .highlight .gd { color: var(--hx-red) !important; background: rgba(255,107,125,.08) !important; }
.content .highlight .gi { color: #a5d6a7 !important; background: rgba(165,214,167,.08) !important; }
.content .highlight .err { color: var(--hx-red) !important; background: transparent !important; }

/* ====================== cards / post list ======================== */
#post-list .card {
  border: 1px solid var(--hx-border) !important;
  border-radius: 10px !important;
  background: var(--hx-panel);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#post-list .card:hover {
  transform: translateY(-3px);
  border-color: var(--hx-border2) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(185,140,255,.25);
}
#post-list .card-title { color: var(--hx-heading); font-size: 1.16rem; font-weight: 600; }

/* ================= prompts / blockquotes / tables ================ */
.content blockquote { border-radius: 0 6px 6px 0; }
.content blockquote.prompt-tip,
.content blockquote.prompt-info,
.content blockquote.prompt-warning,
.content blockquote.prompt-danger {
  border-radius: 8px;
  border-left: 3px solid currentColor;
}
#core-wrapper table { border: 1px solid var(--hx-border2); border-radius: 8px; overflow: hidden; }
#core-wrapper td, #core-wrapper th { border-color: var(--hx-border) !important; }
#core-wrapper thead { border-bottom: 2px solid var(--hx-border2); }

/* ============================ tags =============================== */
.post-tag, a.tag, .tag {
  border-radius: 6px !important;
  border: 1px solid var(--hx-border2) !important;
  font-family: var(--hx-font-code);
  text-transform: lowercase;
  transition: background .15s ease, color .15s ease;
}
.post-tag::before, a.tag::before { content: "#"; color: var(--hx-violet-2); }
.post-tag:hover, a.tag:hover {
  background: var(--hx-violet) !important;
  color: #120a1f !important;
  border-color: var(--hx-violet) !important;
}
.post-tag:hover::before, a.tag:hover::before { color: #120a1f; }

/* violet bullets in article lists */
.content ul > li::marker { color: var(--hx-violet); }

/* ============================ footer ============================= */
footer { border-top: 1px solid var(--hx-border); font-family: var(--hx-font-code); }

/* ========================= back-to-top =========================== */
#back-to-top {
  border-radius: 8px !important;
  border: 1px solid var(--hx-border2) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}

/* ========================= animations ============================ */
@media (prefers-reduced-motion: no-preference) {
  .site-title a::after { animation: hx-blink 1.1s steps(1) infinite; }
  .site-subtitle::after { animation: hx-bob 1.1s steps(1) infinite alternate; }
}
@keyframes hx-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes hx-bob {
  0%   { transform: translate(-22px, 0); }
  100% { transform: translate(-22px, 4px); }
}

/* =========================== mobile ============================== */
@media (max-width: 850px) {
  h1, .post-title { font-size: 1.4rem !important; }
  h2 { font-size: 1.18rem !important; }
  h3 { font-size: 1.04rem !important; }
  .site-title { font-size: 1.15rem !important; }
  #core-wrapper { font-size: 1rem; }
}