/* ===========================
   MARKDOWN (scoped to .md)
   Theme: Glass + Dark Purple
   =========================== */

   .md {
    /* inherit site variables with fallbacks */
    --stroke: var(--stroke, rgba(155,140,243,.23));
    --text: var(--text, #e9e6ff);
    --muted: var(--muted, #b8b2d6);
    --accent: var(--accent, #a176ff);
    --accent-2: var(--accent-2, #6c3cff);
    --cyan: var(--cyan, #6be2ff);
    --glass: var(--glass, linear-gradient(180deg,#ffffff22,#ffffff10));
    --glass-2: var(--glass-2, linear-gradient(180deg,#ffffff18,#ffffff0a));
    --shadow: var(--shadow, 0 22px 60px rgba(0,0,0,.45));
    --bg-code: #0b0720;          /* deep code bg */
    --bg-quote: #120a28;         /* dark quote bg */
    --ring: #6c3cff33;
  
    color: var(--text);
    overflow-wrap: anywhere;
    word-break: normal;
  }
  
  /* Typography */
  .md :where(h1,h2,h3,h4,h5,h6) {
    margin: .9rem 0 .35rem;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: .01em;
    text-wrap: balance;
  }
  .md h1 { font-size: clamp(1.6rem, 2.4vw + .6rem, 2.2rem); }
  .md h2 { font-size: clamp(1.35rem, 1.8vw + .4rem, 1.7rem); }
  .md h3 { font-size: 1.2rem; }
  .md h4 { font-size: 1.05rem; }
  .md h5 { font-size: 1rem; }
  .md h6 { font-size: .95rem; color: var(--muted); text-transform: uppercase; letter-spacing:.08em }
  
  .md p,
  .md ul,
  .md ol,
  .md blockquote,
  .md pre,
  .md table { margin: .7rem 0; }
  
  .md p { color: var(--text); }
  
  /* Emphasis */
  .md strong, .md b { font-weight: 900; }
  .md em, .md i { opacity: .95; }
  .md del { opacity: .85; }
  
  /* Links */
  .md a {
    color: #8ecaff;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: .08em;
  }
  .md a:hover { filter: brightness(1.06); }
  .md a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 8px; }
  
  /* Lists + GFM checkboxes */
  .md ul, .md ol { padding-left: 1.15rem; }
  .md li { margin: .25rem 0; }
  .md li > :where(p,ul,ol){ margin: .35rem 0 .35rem; }
  
  .md input[type="checkbox"] {
    appearance: none;
    width: 1.05rem; height: 1.05rem; margin-right: .45rem; vertical-align: middle;
    border-radius: .35rem; border: 1px solid var(--stroke);
    background: var(--glass-2);
    display: inline-grid; place-content: center;
  }
  .md input[type="checkbox"]::after {
    content: ""; width: .6rem; height: .6rem; border-radius: .2rem; transform: scale(0);
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    transition: transform .12s ease;
  }
  .md input[type="checkbox"]:checked::after { transform: scale(1); }
  
  /* Blockquote */
  .md blockquote {
    padding: .65rem .85rem;
    border-left: 3px solid var(--accent);
    background: var(--bg-quote);
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
  }
  
  /* Inline code */
  .md :not(pre) > code {
    font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
    background: #ffffff18;
    border: 1px solid var(--stroke);
    color: #efeaff;
    padding: .08rem .36rem;
    border-radius: 6px;
    font-size: .95em;
  }
  
  /* -----------------------------------
     Highlight.js base (no CDN needed)
     ----------------------------------- */
  .md code.hljs {
    display: inline-block;
    padding: .08rem .36rem;
    border-radius: 6px;
    background: var(--bg-code);
    color: #e7e5ff;
    border: 1px solid var(--stroke);
  }
  .md pre { margin: .9rem 0; position: relative; }   /* <-- anchor copy button */
  .md pre code.hljs {
    display: block;
    background: var(--bg-code);
    color: #e7e5ff;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    padding: .9rem 1.1rem;
    box-shadow: var(--shadow);
    white-space: pre;
    position: relative;          /* badge can still rely on this */
    padding-right: 3.5rem;       /* room for copy button */
    overflow: auto;              /* both axes */
    max-height: 520px;           /* limit height */
  }
  
  /* Copy button */
  .md .code-copy {
    position: absolute;
    top: .6rem; right: .6rem;
    padding: .38rem .6rem;
    border-radius: .6rem;
    border: 1px solid var(--stroke);
    background: linear-gradient(180deg,#ffffffe6,#f2f2f2cc); /* light chip for contrast */
    color: #14121f; /* dark icon/text */
    font: 800 .82rem/1 Inter, ui-sans-serif;
    cursor: pointer; user-select: none;
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 16px rgba(0,0,0,.28);
    transition: transform .15s ease, filter .15s ease, background .15s ease;
    z-index: 3; /* above code element */
    display: inline-flex; align-items: center; gap: .45rem;
  }
  .md .code-copy:hover { filter: brightness(1.03); transform: translateY(-1px); }
  .md .code-copy:active { transform: translateY(0); }
  .md .code-copy svg { width: 16px; height: 16px; flex: 0 0 auto; }
  .md .code-copy[aria-pressed="true"] {
    background: linear-gradient(180deg,#d8ffe2,#c7f6d4);
  }
  
  /* Optional language badge */
  .md .code-lang {
    position: absolute; left: .7rem; top: .55rem;
    padding: .12rem .4rem; border-radius: .45rem;
    border: 1px solid var(--stroke); background: var(--glass-2);
    color: var(--muted); font: 800 .7rem/1 Inter, ui-sans-serif;
  }
  
  /* HLJS token colors — purple-forward */
  .md .hljs-keyword { color: var(--accent); }
  .md .hljs-title, .md .hljs-function { color: #d8b4fe; }
  .md .hljs-string, .md .hljs-attr, .md .hljs-selector-attr { color: #a78bfa; }
  .md .hljs-number, .md .hljs-literal { color: #b794f4; }
  .md .hljs-comment { color: var(--muted); }
  
  /* Tables (wide tables wrapped by service in .md-table) */
  .md .md-table { overflow-x: auto; }
  .md table {
    border-collapse: collapse;
    width: 100%;
    min-width: min(100%, 520px);
    border: 1px solid var(--stroke);
    background: var(--glass-2);
    border-radius: 12px;
    box-shadow: var(--shadow);
  }
  .md thead th {
    background: linear-gradient(180deg,#ffffff1c,#ffffff12);
    font-weight: 900;
  }
  .md th, .md td {
    border: 1px solid var(--stroke);
    padding: .55rem .65rem;
    white-space: nowrap;
  }
  .md tbody tr:hover { background: #ffffff0a; }
  
  /* Images (Relaxed mode) */
  .md img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: #160b31;
    box-shadow: var(--shadow);
    margin: .5rem 0;
    cursor: zoom-in; /* hint for zoom */
  }
  
  /* ===========================
     IMAGE ZOOM MODAL
     (dark bg, dark-purple chip + white icon)
     =========================== */
  
  .md-zoom {
    position: fixed; inset: 0; z-index: 9999;
    display: grid; place-items: center;
    pointer-events: none;          /* off by default */
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
  }
  .md-zoom.on {
    opacity: 1; visibility: visible;
    pointer-events: auto;
  }
  
  /* Blur the rest of the page while zooming */
  body.is-zooming .page-root { filter: blur(3px) saturate(110%); }
  
  /* Deep, dark backdrop with heavy blur */
  .md-zoom-backdrop {
    position: absolute; inset: 0;
    background:
      radial-gradient(50% 60% at 50% 50%, #000000e6, #000000f6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  /* Framed image */
  .md-zoom-frame {
    position: relative;
    margin: 0;
    border-radius: 16px;
    border: 1px solid var(--stroke);
    background: linear-gradient(180deg,#0c071a,#090515);
    box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06) inset;
    padding: 10px;
    max-width: min(94vw, 1400px);
    max-height: 88vh;
    display: grid; grid-template-rows: 1fr auto; gap: .4rem;
    transform: scale(.96);
    opacity: 0;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
  }
  .md-zoom.on .md-zoom-frame {
    transform: scale(1);
    opacity: 1;
  }
  
  /* The zoomed image */
  .md-zoom-img {
    max-width: 100%;
    max-height: 74vh;
    width: auto; height: auto;
    border-radius: 12px;
    display: block;
    object-fit: contain;
    background: #0b0720;
  }
  
  /* Optional caption */
  .md-zoom-cap[hidden] { display: none; }
  .md-zoom-cap {
    color: var(--muted);
    font: 700 .85rem/1.2 Inter, ui-sans-serif;
    padding: 0 .25rem;
    text-align: center;
    white-space: normal;
  }
  
  /* Close chip: dark purple bg + white icon */
  .md-zoom-close {
    position: absolute; top: 10px; right: 10px;
    appearance: none;
    border: 1px solid #3c2a9a;
    border-radius: 12px;
    background: linear-gradient(180deg,#6c3cff,#4f2bff);
    color: #ffffff;
    font: 900 .95rem/1 Inter, ui-sans-serif;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(0,0,0,.35);
    transition: transform .15s ease, filter .15s ease, background .15s ease;
  }
  .md-zoom-close:hover { filter: brightness(1.06); transform: translateY(-1px); }
  .md-zoom-close:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  
  /* Click outside to close */
  .md-zoom-backdrop { pointer-events: auto; }
  .md-zoom-frame { pointer-events: auto; }
  
  /* ===========================
     ACCESSIBILITY & MISC
     =========================== */
  
  .md ::selection { background: var(--accent-2); color: #fff; }
  
  /* Focus within markdown controls */
  .md :where(a,button,[role="button"]):focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    border-radius: 10px;
  }
  
  /* Embedded media safety */
  .md iframe { max-width: 100%; border: 0; border-radius: 12px; }
  
  /* Custom scrollbars (code blocks, tables) */
  .md pre code.hljs,
  .md .md-table {
    scrollbar-width: thin;                        /* Firefox */
    scrollbar-color: #6c3cff #1a1030;
  }
  .md pre code.hljs::-webkit-scrollbar,
  .md .md-table::-webkit-scrollbar {
    height: 10px;
    width: 10px;
  }
  .md pre code.hljs::-webkit-scrollbar-track,
  .md .md-table::-webkit-scrollbar-track {
    background: #1a1030;
    border-radius: 10px;
  }
  .md pre code.hljs::-webkit-scrollbar-thumb,
  .md .md-table::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,#6c3cff,#a176ff);
    border-radius: 10px;
    border: 2px solid #1a1030;
  }
  .md pre code.hljs::-webkit-scrollbar-thumb:hover,
  .md .md-table::-webkit-scrollbar-thumb:hover {
    filter: brightness(1.08);
  }
  
  /* Motion-reduced users: tone down animations */
  @media (prefers-reduced-motion: reduce) {
    .md *, .md-zoom *, .md-zoom { transition: none !important; animation: none !important; }
  }