/* ==========================================================================
   syntax_hl.css — Chroma tokens, themed for the notebook
   Every color is checked against the code ground it sits on:
   #F2EFE7 in light, #101216 in dark. All clear AA (4.5:1) for body text.
   ========================================================================== */

:root {
  --code-bg:       #F2EFE7;
  --code-keyword:  #8A3FA0;  /* 5.54 */
  --code-name:     #23262B;  /* 13.21 */
  --code-builtin:  #1263AE;  /* 5.34 */
  --code-string:   #20762F;  /* 4.95 */
  --code-number:   #8F5300;  /* 5.37 */
  --code-comment:  #5A6068;  /* 5.53 */
  --code-punct:    #4A4F57;  /* 7.17 */
  --code-lnt:      #666C75;  /* 4.61 */
  --code-error:    #C42B2B;  /* 4.90 */
  --code-hl:       #E6E0CE;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --code-bg:      #101216;
    --code-keyword: #D4A0E8;  /* 8.92 */
    --code-name:    #E9E7E1;  /* 15.16 */
    --code-builtin: #6BB4F5;  /* 8.46 */
    --code-string:  #7FD18F;  /* 10.19 */
    --code-number:  #E3A857;  /* 8.93 */
    --code-comment: #9AA1AB;  /* 7.20 */
    --code-punct:   #B8BFC9;  /* 10.12 */
    --code-lnt:     #8B929C;  /* 5.97 */
    --code-error:   #F07272;  /* 6.57 */
    --code-hl:      #232833;
  }
}
:root[data-theme="dark"] {
  --code-bg:      #101216;
  --code-keyword: #D4A0E8;
  --code-name:    #E9E7E1;
  --code-builtin: #6BB4F5;
  --code-string:  #7FD18F;
  --code-number:  #E3A857;
  --code-comment: #9AA1AB;
  --code-punct:   #B8BFC9;
  --code-lnt:     #8B929C;
  --code-error:   #F07272;
  --code-hl:      #232833;
}

.highlight, .chroma { background-color: var(--code-bg); color: var(--code-name); }
.chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
.chroma .lntable { display: block; background-color: transparent; }
.chroma .hl { background-color: var(--code-hl); display: block; width: 100%; }
.chroma .lnt, .chroma .ln { color: var(--code-lnt); white-space: pre; user-select: none;
                            margin-inline-end: .6em; padding-inline: .4em; }
.chroma .line { display: flex; }

/* comments */
/* .cl is Chroma's code-LINE wrapper, not a comment. Grouping it here italicized
   every line of every code block. */
.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs,
.chroma .cp, .chroma .cpf { color: var(--code-comment); font-style: italic; }
.chroma .cl { color: inherit; font-style: normal; }
/* keywords */
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp,
.chroma .kr, .chroma .kt { color: var(--code-keyword); font-weight: 700; }
/* names */
.chroma .n, .chroma .na, .chroma .nc, .chroma .nd, .chroma .ne, .chroma .nf,
.chroma .nl, .chroma .nn, .chroma .nx, .chroma .py, .chroma .fm { color: var(--code-name); }
.chroma .nb, .chroma .bp, .chroma .ni, .chroma .no, .chroma .nt,
.chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { color: var(--code-builtin); }
/* literals */
.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2,
.chroma .se, .chroma .sh, .chroma .si, .chroma .sx, .chroma .sr, .chroma .s1,
.chroma .ss { color: var(--code-string); }
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il,
.chroma .mo { color: var(--code-number); }
/* operators and punctuation */
.chroma .o, .chroma .ow { color: var(--code-punct); font-weight: 700; }
.chroma .p { color: var(--code-punct); }
/* diagnostics */
.chroma .err, .chroma .gd { color: var(--code-error); }
.chroma .gi { color: var(--code-string); }
.chroma .ge { font-style: italic; }
.chroma .gs { font-weight: 700; }
.chroma .gu, .chroma .gh { color: var(--code-comment); font-weight: 700; }

/* The language icon sits in the corner of the block. The shell does not scroll,
   so the badge stays put while long lines scroll underneath it, and it carries
   the block's own ground so nothing shows through from behind. */
.code-block { position: relative; }
.code-block > .highlight { margin-block: 0; }
.lang-badge {
  position: absolute; z-index: 1;
  inset-block-start: 1px; inset-inline-end: 1px;
  padding: .35rem .5rem; border-start-end-radius: var(--radius);
  inline-size: 2.3rem; block-size: 2.1rem;
  background: var(--paper-sunken);
  pointer-events: none; user-select: none; opacity: .85;
}
.lang-badge svg, .lang-icon-inline svg { inline-size: 100%; block-size: 100%; display: block; }
/* The first line is pushed below the badge rather than being kept clear of it
   sideways: reserving width at the end pushed long lines into a scrollbar, and
   the badge carries the block's own ground, so anything passing under it is
   masked cleanly. The room is made on the scroller, which is the one box both
   shapes share — with line numbers the code sits in a table inside .chroma,
   without them .chroma is the <pre> itself and would swallow the padding. */
.code-block.has-lang-icon > .highlight { padding-block-start: 1.6rem; }
.lang-icon-inline { display: inline-block; inline-size: 1.15em; vertical-align: -.2em; }