/* Super Calculator: syntax highlighting for the sheet editor (ui/highlight.js).
   The backdrop sits under the textarea; while the host has .sc-hl-on the textarea
   paints its glyphs transparent and the coloured backdrop text shows through.
   Every colour below keeps at least 4.5:1 on var(--surface) in both themes
   (7:1 with prefers-contrast: more). Glyph widths never change: no bold, no italic. */

:root {
  --hl-num: #1a56db;       /* 6.2:1 on #ffffff */
  --hl-op: #b4410f;        /* 5.7:1 */
  --hl-paren: #4b5a6c;     /* 7.1:1 */
  --hl-fn: #7c3aed;        /* 5.7:1 */
  --hl-var: #0f766e;       /* 5.5:1 */
  --hl-builtin: #be185d;   /* 6.0:1 */
  --hl-cur: #8a5300;       /* 6.3:1 */
  --hl-label: #3f6212;     /* 7.1:1 */
  --hl-comment: var(--text-muted);
  --hl-text: var(--text);
  /* Headings ("# Продукты", or a bare "Продукты"): full-strength text with a thin accent
     underline, so they read apart from muted // notes and green labels in every theme.
     var() keeps both adapting to the dark and high-contrast tokens of style.css. */
  --hl-heading: var(--text);
  --hl-heading-line: var(--accent);
  --hl-err-line: rgba(180, 35, 24, 0.7);
  /* Translucent, so the backdrop text still shows through where a browser keeps the
     selected textarea glyphs transparent. Over #ffffff it is #b7d6d3: --text 10.6:1. */
  --hl-selection: rgba(15, 118, 110, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hl-num: #79b8ff;     /* 8.3:1 on #161c23 */
    --hl-op: #ff9e64;      /* 8.4:1 */
    --hl-paren: #a7b4c4;   /* 8.1:1 */
    --hl-fn: #c4a7ff;      /* 8.4:1 */
    --hl-var: #4fd1c5;     /* 9.2:1 */
    --hl-builtin: #f490c8; /* 7.9:1 */
    --hl-cur: #f2c063;     /* 10.2:1 */
    --hl-label: #a3d977;   /* 10.4:1 */
    --hl-err-line: rgba(248, 113, 113, 0.75);
    --hl-selection: rgba(45, 212, 191, 0.28); /* over #161c23: #1c504f, --text 7.6:1 */
  }
}

:root[data-theme="dark"] {
  --hl-num: #79b8ff;
  --hl-op: #ff9e64;
  --hl-paren: #a7b4c4;
  --hl-fn: #c4a7ff;
  --hl-var: #4fd1c5;
  --hl-builtin: #f490c8;
  --hl-cur: #f2c063;
  --hl-label: #a3d977;
  --hl-err-line: rgba(248, 113, 113, 0.75);
  --hl-selection: rgba(45, 212, 191, 0.28);
}

@media (prefers-contrast: more) {
  :root {
    --hl-num: #1e3fa8;
    --hl-op: #8c2f06;
    --hl-paren: #2f3a47;
    --hl-fn: #5b21b6;
    --hl-var: #0b5a54;
    --hl-builtin: #9d174d;
    --hl-cur: #6b3f00;
    --hl-label: #2f4a0e;
    --hl-err-line: #b42318;
  }
  :root[data-theme="dark"] {
    --hl-num: #a8d0ff;
    --hl-op: #ffc19e;
    --hl-paren: #d3dbe5;
    --hl-fn: #ddcbff;
    --hl-var: #8ff0e6;
    --hl-builtin: #ffc0e3;
    --hl-cur: #ffdb94;
    --hl-label: #c9ec9f;
    --hl-err-line: #f87171;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hl-num: #a8d0ff;
    --hl-op: #ffc19e;
    --hl-paren: #d3dbe5;
    --hl-fn: #ddcbff;
    --hl-var: #8ff0e6;
    --hl-builtin: #ffc0e3;
    --hl-cur: #ffdb94;
    --hl-label: #c9ec9f;
    --hl-err-line: #f87171;
  }
}

/* Host and backdrop ----------------------------------------------------------- */

.sc-hl-host { position: relative; isolation: isolate; }

.sc-hl-backdrop {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;           /* above the host's background, under the textarea */
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  display: none;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--hl-text);
  contain: layout style;
}
.sc-hl-on .sc-hl-backdrop { display: block; }

.sc-hl-content {
  margin: 0;
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
  font-variant-ligatures: none;
  transform-origin: 0 0;
}
.sc-hl-line {
  display: block;
  height: var(--sc-hl-row, 1.75rem);
  overflow: visible;
  white-space: pre;
}

/* The textarea: glyphs transparent, caret, selection and placeholder visible.
   Ligatures are off on both layers so a glyph never spans two coloured spans. */
.sc-hl-on .sc-hl-textarea {
  -webkit-text-fill-color: transparent;
  caret-color: var(--text);
  background-color: transparent;
  font-variant-ligatures: none;
}
.sc-hl-on .sc-hl-textarea::placeholder {
  -webkit-text-fill-color: currentColor;
}
.sc-hl-on .sc-hl-textarea::selection {
  background-color: var(--hl-selection);
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}
.sc-hl-on .sc-hl-textarea::-moz-selection {
  background-color: var(--hl-selection);
  color: var(--text);
}

/* Off switch: .sc-hl-off on the host or any ancestor (e.g. <html>). */
.sc-hl-off .sc-hl-backdrop,
.sc-hl-off.sc-hl-host .sc-hl-backdrop { display: none; }
.sc-hl-off .sc-hl-textarea,
.sc-hl-off.sc-hl-host .sc-hl-textarea { -webkit-text-fill-color: currentColor; }
.sc-hl-off .sc-hl-textarea::selection,
.sc-hl-off.sc-hl-host .sc-hl-textarea::selection { -webkit-text-fill-color: currentColor; }

/* Tokens --------------------------------------------------------------------- */

.sc-hl-num { color: var(--hl-num); }
.sc-hl-op, .sc-hl-kw { color: var(--hl-op); }
.sc-hl-paren, .sc-hl-sep { color: var(--hl-paren); }
.sc-hl-fn { color: var(--hl-fn); }
.sc-hl-var { color: var(--hl-var); }
.sc-hl-builtin { color: var(--hl-builtin); }
.sc-hl-cur { color: var(--hl-cur); }
.sc-hl-label { color: var(--hl-label); }
.sc-hl-heading {
  color: var(--hl-heading);
  text-decoration-line: underline;
  text-decoration-color: var(--hl-heading-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.sc-hl-comment { color: var(--hl-comment); }
.sc-hl-text { color: var(--hl-text); }

/* Error: a muted wavy underline over the line content (not while typing). */
.sc-hl-err {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--hl-err-line);
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: none;
  text-underline-offset: 3px;
}
/* IME composition: the textarea's own composition underline uses its (transparent)
   text colour, so the backdrop draws one. */
.sc-hl-ime {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: currentColor;
  text-decoration-skip-ink: none;
  text-underline-offset: 3px;
}

/* Same colours through the CSS Custom Highlight API (the default mode, see
   highlight.js). One rule per name: a browser without ::highlight() drops only these. */
::highlight(sc-hl-num) { color: var(--hl-num); }
::highlight(sc-hl-op) { color: var(--hl-op); }
::highlight(sc-hl-kw) { color: var(--hl-op); }
::highlight(sc-hl-paren) { color: var(--hl-paren); }
::highlight(sc-hl-sep) { color: var(--hl-paren); }
::highlight(sc-hl-fn) { color: var(--hl-fn); }
::highlight(sc-hl-var) { color: var(--hl-var); }
::highlight(sc-hl-builtin) { color: var(--hl-builtin); }
::highlight(sc-hl-cur) { color: var(--hl-cur); }
::highlight(sc-hl-label) { color: var(--hl-label); }
::highlight(sc-hl-heading) {
  color: var(--hl-heading);
  text-decoration-line: underline;
  text-decoration-color: var(--hl-heading-line);
  text-decoration-thickness: 1px;
}
::highlight(sc-hl-comment) { color: var(--hl-comment); }
::highlight(sc-hl-err) {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--hl-err-line);
  text-decoration-thickness: 1px;
}
::highlight(sc-hl-ime) {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--text);
}

/* Forced colours: no highlighting, the plain textarea in system colours. */
@media (forced-colors: active) {
  .sc-hl-backdrop, .sc-hl-on .sc-hl-backdrop { display: none !important; }
  .sc-hl-on .sc-hl-textarea {
    -webkit-text-fill-color: currentColor !important;
    caret-color: auto;
    font-variant-ligatures: normal;
  }
  .sc-hl-on .sc-hl-textarea::selection {
    -webkit-text-fill-color: currentColor;
    background-color: Highlight;
    color: HighlightText;
  }
}