/* ===== Black side bar (desktop) — after amyxiaofanjiang.com =====
   Linked last in <head> on every page with the side bar.
   Light mode: black bar + white page. Dark mode: white bar + black page.            */
@media (min-width:768px){
  :root{
    --sb-bg:#111;          /* side bar black */
    --sb-fg:#f5f2ee;       /* off-white text */
    --sb-dim:rgba(245,242,238,.62);
    --sb-l:32px;           /* text left edge (was ~53px) */
    --side-l:var(--sb-l);  /* footer (Instagram / Email / LinkedIn / Change Mode) follows */
  }

  /* panel */
  .pin-left .page-layout{
    background:var(--sb-bg);
    height:calc(100vh + 2.4rem);
    max-height:none;
    padding-left:0!important;
    color:var(--sb-fg);
  }
  .pin-left .page-content{
    padding-left:var(--sb-l)!important;
    padding-right:28px!important;
  }
  .pin-left .side-foot{left:var(--sb-l)!important}

  /* all text + links white (overrides inline rgba(0,0,0,.x) colours) */
  .pin-left bodycopy,
  .pin-left bodycopy span,
  .pin-left bodycopy a,
  .pin-left .side-foot,
  .pin-left .side-foot a,
  .pin-left .side-foot .th-toggle{color:var(--sb-fg)!important}

  /* intro copy a step quieter; highlighted words stay bright */
  .pin-left .side-intro{color:var(--sb-dim)!important}
  .pin-left .side-intro span{color:inherit!important}
  .pin-left .side-intro .si-hl,
  .pin-left .side-intro a{color:var(--sb-fg)!important}
  .pin-left .side-intro a{text-decoration:underline;text-underline-offset:.18em}

  /* current page "button": same as the original white sidebar
     (green text, soft blurred lime glow); intro text stays neutral */
  .pin-left .nv.on span{color:#5e9c00!important}
  .pin-left .nv::before{background:radial-gradient(closest-side,rgba(138,206,0,.85),rgba(138,206,0,.45) 45%,rgba(138,206,0,0) 100%)!important;filter:blur(14px)!important}
  /* nav hover / active */
  .pin-left bodycopy a:hover{opacity:.65}

  /* black line-drawing logo -> white */
  .pin-left img[src*="JingyiZhang_logo"]{filter:invert(1)}

  /* footer icons drawn in currentColor / dark: lift to white */
  .pin-left .side-foot svg{color:var(--sb-fg)}
  .pin-left .side-foot img{filter:invert(1)}
  .pin-left .side-foot .th-toggle .th-ico{border-color:var(--sb-fg)}

  /* Dark mode: the site inverts the whole page, so the black bar is left as-is and
     comes out light (white bar + black page). Only undo the theme's per-element
     re-inversions inside the bar so the logo, highlights and icons flip with it. */
  html[data-theme="dark"] .pin-left img[src*="JingyiZhang_logo"]{filter:invert(1)!important}
  html[data-theme="dark"] .pin-left .side-intro .si-hl{filter:none!important}
  html[data-theme="dark"] .pin-left .side-foot img{filter:invert(1)!important}
  html[data-theme="dark"] .pin-left .nv.on span{filter:invert(1) hue-rotate(180deg)!important}
  html[data-theme="dark"] .pin-left .nv::before{filter:invert(1) hue-rotate(180deg) blur(14px)!important}
  /* pure black here renders as the lightest tone the dark theme allows */
  html[data-theme="dark"] .pin-left .page-layout{background:#000}
}