/* =============================================================================
   hl.css — code block styling for the lessons
   Token colours are defined for light and dark, chosen for WCAG AA contrast
   against the code background in both. Nothing here assumes a theme: it reads
   the page's own tokens where they exist and defines its own where they don't.
   ========================================================================== */

/* Palettes are declared on :root, but also on any [data-theme] element, so a
   single page can show a light and a dark sample side by side. Custom
   properties inherit, so the nearest [data-theme] ancestor wins for a subtree. */
:root, [data-theme="light"] {
  --hl-bg:      #f7f9fc;
  --hl-head:    #eef2f8;
  --hl-line:    #dde5ef;
  --hl-txt:     #1c2430;
  --hl-gutter:  #67717f;   /* 2.45:1 before, below the 4.5 floor */
  --hl-mark:    #fff4d6;
  --hl-markbar: #e0a415;

  --t-cm:  #5f7085;   /* comment   */
  --t-st:  #0a7d55;   /* string    */
  --t-nu:  #b3541e;   /* number    */
  --t-kw:  #a21caf;   /* keyword   */
  --t-ty:  #1749b8;   /* type      */
  --t-bi:  #0b6f8f;   /* builtin   */
  --t-fn:  #7838c7;   /* function  */
  --t-cn:  #b3541e;   /* constant  */
  --t-op:  #45566b;   /* operator  */
  --t-pu:  #667183;   /* punctuation, 4.29:1 before */
  --t-pp:  #b3541e;   /* preprocessor / directive */
  --t-lb:  #0a7d55;   /* label     */
  --t-rg:  #a21caf;   /* register / variable */
  --t-ins: #0a7d55;   /* diff +    */
  --t-del: #c02626;   /* diff -    */
}

:root[data-theme="dark"], [data-theme="dark"] {
  --hl-bg:      #0f151d;
  --hl-head:    #161e28;
  --hl-line:    #26313f;
  --hl-txt:     #dce6f2;
  --hl-gutter:  #6e819b;
  --hl-mark:    #2a2413;
  --hl-markbar: #ffb454;

  --t-cm:  #7d8ea3;
  --t-st:  #7ee0a8;
  --t-nu:  #ffb454;
  --t-kw:  #e88bd8;
  --t-ty:  #8fb8ff;
  --t-bi:  #6fd8e8;
  --t-fn:  #c4a5ff;
  --t-cn:  #ffb454;
  --t-op:  #a8b6c8;
  --t-pu:  #8494a8;
  --t-pp:  #ffb454;
  --t-lb:  #7ee0a8;
  --t-rg:  #e88bd8;
  --t-ins: #7ee0a8;
  --t-del: #ff8f8f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hl-bg:      #0f151d;
    --hl-head:    #161e28;
    --hl-line:    #26313f;
    --hl-txt:     #dce6f2;
    --hl-gutter:  #6e819b;
    --hl-mark:    #2a2413;
    --hl-markbar: #ffb454;

    --t-cm:  #7d8ea3;
    --t-st:  #7ee0a8;
    --t-nu:  #ffb454;
    --t-kw:  #e88bd8;
    --t-ty:  #8fb8ff;
    --t-bi:  #6fd8e8;
    --t-fn:  #c4a5ff;
    --t-cn:  #ffb454;
    --t-op:  #a8b6c8;
    --t-pu:  #8494a8;
    --t-pp:  #ffb454;
    --t-lb:  #7ee0a8;
    --t-rg:  #e88bd8;
    --t-ins: #7ee0a8;
    --t-del: #ff8f8f;
  }
}

/* ------------------------------------------------------------- container */
.hl {
  margin: 22px 0;
  border: 1px solid var(--hl-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--hl-bg);
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

.hl-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  background: var(--hl-head);
  border-bottom: 1px solid var(--hl-line);
  font-size: .74rem;
  color: var(--hl-gutter);
}
.hl-name { font-weight: 700; color: var(--hl-txt); opacity: .8; }
.hl-lang {
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .64rem;
}
.hl-head .hl-copy { margin-left: auto; }
.hl-head .hl-lang + .hl-copy { margin-left: 0; }

.hl-copy {
  font: inherit;
  font-size: .7rem;
  font-weight: 600;
  color: var(--hl-txt);
  background: transparent;
  border: 1px solid var(--hl-line);
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.hl-copy:hover { border-color: var(--t-ty); color: var(--t-ty); }
.hl-copy:focus-visible { outline: 2px solid var(--t-ty); outline-offset: 1px; }
.hl-copy.ok { color: var(--t-st); border-color: var(--t-st); }

/* ------------------------------------------------------------------ code */
.hl-body {
  margin: 0;
  padding: 12px 0;
  overflow-x: auto;
  font-size: .84rem;
  line-height: 1.62;
  color: var(--hl-txt);
  tab-size: 4;
  -moz-tab-size: 4;
}
.hl-body:focus-visible { outline: 2px solid var(--t-ty); outline-offset: -2px; }
.hl-body code {
  display: block;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  min-width: max-content;
}

/* one line, so the gutter number can be a counter and stay out of copied text */
.hl-ln {
  display: block;
  padding: 0 14px;
  white-space: pre;
}
.hl-nums code { counter-reset: none; }
.hl-nums .hl-ln { padding-left: 0; }
.hl-nums .hl-ln::before {
  counter-increment: hlln;
  content: counter(hlln);
  display: inline-block;
  width: 2.6em;
  margin-right: 14px;
  padding-right: 8px;
  text-align: right;
  color: var(--hl-gutter);
  border-right: 1px solid var(--hl-line);
  user-select: none;
  -webkit-user-select: none;
  opacity: .75;
}

.hl-ln.hl-mark {
  background: var(--hl-mark);
  box-shadow: inset 3px 0 0 var(--hl-markbar);
}

/* soft-wrap variant, for prose-like snippets and narrow screens */
.hl-wrap .hl-ln { white-space: pre-wrap; overflow-wrap: anywhere; }
.hl-wrap .hl-body code { min-width: 0; }
.hl-wrap .hl-nums .hl-ln { display: flex; }
.hl-wrap .hl-nums .hl-ln::before { flex: none; }

/* ---------------------------------------------------------------- tokens */
.t-cm { color: var(--t-cm); font-style: italic; }
.t-st { color: var(--t-st); }
.t-nu { color: var(--t-nu); }
.t-kw { color: var(--t-kw); font-weight: 600; }
.t-ty { color: var(--t-ty); }
.t-bi { color: var(--t-bi); }
.t-fn { color: var(--t-fn); }
.t-cn { color: var(--t-cn); }
.t-op { color: var(--t-op); }
.t-pu { color: var(--t-pu); }
.t-pp { color: var(--t-pp); font-weight: 600; }
.t-lb { color: var(--t-lb); font-weight: 600; }
.t-rg { color: var(--t-rg); }
.t-ins { color: var(--t-ins); }
.t-del { color: var(--t-del); }

/* diff rows read better with a tinted background */
.hl[data-lang="diff"] .t-ins { display: inline-block; width: 100%; }
.hl[data-lang="diff"] .t-del { display: inline-block; width: 100%; }

@media (max-width: 560px) {
  .hl-body { font-size: .78rem; }
  .hl-nums .hl-ln::before { width: 2em; margin-right: 8px; padding-right: 5px; }
}

@media print {
  .hl { break-inside: avoid; }
  .hl-copy { display: none; }
}