/* ==================================================================
   bok.css · Programmering vg1 · Kaares kokebok (JavaScript)
   Builds on bok.css from the vg2 book.

   Principles
   1. One grammar for all boxes: every box with code-like content has
      a tab at the top right that says what it is: a file name for
      code, "Utskrift" for output, "Algoritme" for an algorithm in
      Norwegian, "Kode A" ... for snippets to compare.
   2. Code and output look different: code has a tinted background
      and syntax colours, output is white with a thin border and no
      colours. The student must never doubt which one is which.
   3. Signalling: when a program is extended, the lines that already
      exist are muted and the new lines are marked (like \prevcode).
   4. Few box types. Merk, Tips and Spør KI are the only asides.
      Tasks a) b) c) are ordinary text in the main column, and boxes
      are never indented, even when they belong to a task.
   5. Readable measure (about 65-75 characters), left aligned text,
      generous line height, and contrast that meets WCAG AA in light
      and dark mode. Colour is never the only signal.
   ================================================================== */

:root {
  --bok-bla: #1f6fc5;
  --tekst: #212529;
  --tekst-dempet: #5f6b76;
  --kode-bg: #f1f3f5;
  --kode-kant: #dfe3e8;
  --fane-bg: #e4e8ec;
  --fane-tekst: #4f5b66;
  --utskrift-bg: #ffffff;
  --utskrift-kant: #c3cbd3;
  --ny-bg: rgba(31, 111, 197, 0.10);
  --ny-kant: #1f6fc5;
  --brikke-kant: #9aa6b2;
  --inline-bg: #eef1f4;
  --inline-tekst: #1d2a36;
  --del-bg: #1f5fa8;
  --del-tekst: #ffffff;
  --sammen-bg: #f4f7fb;
  --sammen-kant: #cfdbe8;
  --sammen-tittel-bg: #dbe8f6;
  --sammen-tittel-tekst: #123d6e;
  --stjerne: #b06f00;
  --ki-kant: #6f42c1;
  --ki-bg: #eeedfe;
  --tabell-strek: #3d4349;
}
body.quarto-dark {
  --bok-bla: #6aa9ec;
  --tekst: #e6e6e6;
  --tekst-dempet: #a9b4be;
  --kode-bg: #2b2f33;
  --kode-kant: #3a3f45;
  --fane-bg: #3a3f45;
  --fane-tekst: #c4ccd3;
  --utskrift-bg: #1f2225;
  --utskrift-kant: #59626b;
  --ny-bg: rgba(106, 169, 236, 0.16);
  --ny-kant: #6aa9ec;
  --brikke-kant: #6f7a85;
  --inline-bg: #33383d;
  --inline-tekst: #e9eef2;
  --del-bg: #6aa9ec;
  --del-tekst: #10161c;
  --sammen-bg: #24292e;
  --sammen-kant: #3d4a57;
  --sammen-tittel-bg: #2f3e50;
  --sammen-tittel-tekst: #d6e6f8;
  --stjerne: #f2c14e;
  --ki-kant: #b197fc;
  --ki-bg: rgba(177, 151, 252, 0.16);
  --tabell-strek: #9aa4ad;
}

/* ---------- Body text ------------------------------------------- */
main {
  font-size: 1.0625rem;
  line-height: 1.6;
}
main p, main li {
  text-align: left;
  hyphens: manual;
}
main h2 {
  margin-top: 3.4rem;
  padding-bottom: 0.3rem;
}
main h3 {
  margin-top: 2.2rem;
}

/* Monospace with clear 0/O and 1/l/I */
code, pre, kbd, .sql-kode, .sql-tittel, .sql-feil {
  font-family: ui-monospace, "Cascadia Mono", "Source Code Pro", "JetBrains Mono",
    Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

/* Inline code: calm, high contrast, not purple */
main p code:not(.sourceCode),
main li code:not(.sourceCode),
main td code:not(.sourceCode) {
  color: var(--inline-tekst);
  background: var(--inline-bg);
  padding: 0.08em 0.32em;
  border-radius: 0.25rem;
  font-size: 0.9em;
}

/* ---------- Code boxes ------------------------------------------ */
div.sourceCode {
  background: var(--kode-bg);
  border: 1px solid var(--kode-kant);
  border-radius: 0.4rem;
}
div.sourceCode pre {
  padding: 0.7rem 0.9rem;
}
div.sourceCode code {
  font-size: 0.875rem;
  line-height: 1.55;
}

/* Line numbers: muted, in a gutter inside the box.
   The task text refers to "kodelinje 3", so the numbers must show. */
pre.numberSource {
  margin-left: 0 !important;
  padding: 0.7rem 0 !important;
}
pre.numberSource > code {
  display: block;
}
pre.numberSource code > span {
  left: 0 !important;
  position: relative;
  box-sizing: border-box;
  min-width: 100%;
  padding-left: 3.1em;
  padding-right: 0.9rem;
  min-height: 1.55em; /* empty lines keep their height */
  vertical-align: top;
}
pre.numberSource code > span > a:first-child::before {
  position: absolute !important;
  left: 0 !important;
  width: 2.1em;
  padding: 0 !important;
  margin: 0 !important;
  text-align: right;
  color: var(--tekst-dempet) !important;
  opacity: 0.8;
  background: transparent !important;
  border: none !important;
}

/* Tab at the top right (file name, Utskrift, Algoritme, Kode A ...) */
.code-with-filename {
  position: relative;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.code-with-filename .code-with-filename-file {
  position: absolute;
  top: -1.5rem;
  right: 0;
  z-index: 2;
  height: 1.5rem;
  padding: 0.28rem 0.75rem 0.15rem;
  border: none;
  border-radius: 0.4rem 0.4rem 0 0;
  background: var(--fane-bg);
}
.code-with-filename .code-with-filename-file pre {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 0.75rem;
  line-height: 1.2;
}
.code-with-filename .code-with-filename-file strong {
  font-weight: 600;
  color: var(--fane-tekst);
}
.code-with-filename div.sourceCode {
  margin-top: 0;
  border-top-right-radius: 0;
}

/* ---------- Extended programs: old lines muted, new lines marked */
div.har-nye-linjer code > span.gammel {
  opacity: 0.45;
}
div.har-nye-linjer code > span.ny {
  display: inline-block;
  width: 100%;
  background: var(--ny-bg);
  box-shadow: inset 3px 0 0 var(--ny-kant);
}

/* ---------- Output ----------------------------------------------
   Plain text blocks have no div.sourceCode, only a bare <pre>. */
.utskrift .code-with-filename > pre,
.oppskrift .code-with-filename > pre {
  margin: 0;
  padding: 0.7rem 0.9rem;
  background: var(--utskrift-bg);
  border: 1px solid var(--utskrift-kant);
  border-radius: 0.4rem;
  border-top-right-radius: 0;
  color: var(--tekst);
  font-size: 0.875rem;
  line-height: 1.55;
}
.utskrift .code-with-filename-file,
.oppskrift .code-with-filename-file {
  background: var(--utskrift-bg) !important;
  border: 1px solid var(--utskrift-kant);
  border-bottom: none;
  top: calc(-1.5rem + 1px) !important;
}

/* ---------- Result in the browser (nettleser.lua) ---------------
   A real page in a frame, with the browser's own styles. */
.nettleser iframe.nettleser-ramme {
  display: block;
  width: 100%;
  min-height: 3rem;
  margin: 0;
  background: #ffffff;
  border: 1px solid var(--kode-kant);
  border-radius: 0.4rem;
  border-top-right-radius: 0;
}
.nettleser .code-with-filename-file {
  background: #ffffff !important;
  border: 1px solid var(--kode-kant);
  border-bottom: none;
  top: calc(-1.5rem + 1px) !important;
}
.nettleser {
  max-width: 100%;
}
.nettleser .code-with-filename-file strong {
  color: #6c757d;
  font-weight: 400;
}

/* ---------- Algorithm in Norwegian ------------------------------ */
.oppskrift .code-with-filename > pre {
  font-family: inherit;
  font-size: 0.97rem;
  line-height: 1.6;
  white-space: pre-wrap;
  tab-size: 4;
}
.oppskrift .code-with-filename > pre code {
  white-space: pre-wrap;
  font-family: inherit;
}

/* Code and algorithm side by side when there is room for both.
   The algorithm moves below the code when the code is wide, so that
   indented lines in the algorithm never have to wrap. */
.kode-og-oppskrift {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  align-items: flex-start;
}
.kode-og-oppskrift > .code-with-filename {
  flex: 1 0 auto;
  max-width: 100%;
  margin-bottom: 0;
}
.kode-og-oppskrift > .oppskrift {
  flex: 1 1 14rem;
  min-width: 0;
}
.kode-og-oppskrift + * {
  margin-top: 1.2rem;
}

/* ---------- Snippets to compare (Kode A, Kode B ...) ------------- */
.sammenlign {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  column-gap: 1rem;
  margin-bottom: 0.5rem;
}
.sammenlign.en-kolonne {
  grid-template-columns: 1fr;
}
.sammenlign .code-with-filename {
  margin-top: 1.9rem;
  margin-bottom: 0;
}

/* ---------- Code lines to place (loose pieces) ------------------ */
.kodelinjer ul {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.kodelinjer li {
  margin: 0;
  padding: 0.3rem 0.65rem;
  background: var(--utskrift-bg);
  border: 1px dashed var(--brikke-kant);
  border-radius: 0.3rem;
}
.kodelinjer li code {
  background: transparent !important;
  padding: 0 !important;
  color: var(--tekst) !important;
  font-size: 0.875rem !important;
}

/* ---------- Tasks a) b) c) -------------------------------------- */
/* The letter continues after text between the lists, because each
   list starts where the previous one stopped. */
main ol[type="a"] {
  list-style: none;
  padding-left: 0;
  margin: 0.9rem 0 1.3rem;
}
main ol[type="a"] > li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
}
main ol[type="a"] > li::before {
  content: counter(list-item, lower-alpha) ")";
  position: absolute;
  left: 0;
  width: 1.6rem;
  font-weight: 600;
  color: var(--tekst);
}

/* ---------- Merk and Tips --------------------------------------- */
.callout.callout-style-simple {
  margin: 0.8rem 0 1.2rem;
  padding: 0.3rem 0.8rem;
  /* Only the line on the left: the frame around the box carries no
     information, so it is left out (Tufte). */
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent;
}
.callout.callout-style-simple .callout-body {
  font-size: 0.97rem;
}

/* ---------- Suggested questions for an AI (.ki, see ki.lua) ------
   Same shape as Merk and Tips, with a title line: an icon, the title
   "Spør KI", and a copy button on the right. */
.ki {
  margin: 0.8rem 0 1.2rem;
  padding: 0.45rem 0.8rem 0.7rem 0.9rem;
  border: 0;
  border-left: 0.3rem solid var(--ki-kant);
  border-radius: 0;
  font-size: 0.97rem;
}
.ki-tittel {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
  color: var(--ki-kant);
  font-weight: 600;
  font-size: 0.95rem;
}
.ki-ikon svg {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
}
.ki-kopier {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: none;
  border-radius: 0.35rem;
  background: transparent;
  color: var(--ki-kant);
  cursor: pointer;
}
.ki-kopier:hover,
.ki-kopier:focus-visible {
  background: var(--ki-bg);
}
.ki-kopier svg {
  width: 1.15rem;
  height: 1.15rem;
}
.ki-tekst > p:last-child {
  margin-bottom: 0;
}

/* ---------- Tables ----------------------------------------------
   After Tufte: ink only where it carries meaning. Three rules (above
   the headings, under the headings, at the bottom), no lines between
   rows, no shading, and code without its grey patch. Numbers line up
   because all digits have the same width. */
main table,
main table.table {
  width: auto !important;
  min-width: 14rem;
  max-width: 100%;
  margin: 0.8rem 0 1.4rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums lining-nums;
  border-top: 1.5px solid var(--tabell-strek);
  border-bottom: 1.5px solid var(--tabell-strek);
}
main table > :not(caption) > * > *,
main table.table > :not(caption) > * > * {
  padding: 0.22rem 1.4rem 0.22rem 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  vertical-align: top;
  line-height: 1.45;
}
main table > :not(caption) > * > *:last-child {
  padding-right: 0 !important;
}
main table > thead,
main table.table > thead {
  border: 0 !important;
  border-bottom: 0.75px solid var(--tabell-strek) !important;
}
main table > thead > tr > th {
  padding-top: 0.4rem !important;
  padding-bottom: 0.3rem !important;
  font-weight: 600;
  vertical-align: bottom;
}
main table > tbody > tr:first-child > * {
  padding-top: 0.45rem !important;
}
main table > tbody > tr:last-child > * {
  padding-bottom: 0.45rem !important;
}
main table > tfoot {
  border-top: 0.75px solid var(--tabell-strek);
}
main table code:not(.sourceCode),
main td code:not(.sourceCode) {
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
}
main table caption {
  caption-side: top;
  padding: 0 0 0.3rem;
  color: var(--tekst-dempet);
  text-align: left;
}

/* A sample of text in a colour on a background, in the contrast
   tables: the reader sees the colours, and not only their codes. */
.tekstprove {
  display: inline-block;
  padding: 0.05em 0.55em;
  font-weight: 600;
  border-radius: 2px;
}

/* ---------- Code with the names of its parts --------------------
   A short line of code with a label under or over each part, in
   place of a table that names the parts (Tufte: put the words next
   to what they explain). */
.merket-kode {
  margin: 0.6rem 0 1.4rem;
  padding: 2.3rem 0.2rem 2.4rem;
  font-family: var(--bs-font-monospace, monospace);
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow-x: auto;
}
.merket-kode .del {
  position: relative;
  display: inline-block;
}
.merket-kode .del::before {
  content: "";
  position: absolute;
  left: 0.05em;
  right: 0.05em;
  top: calc(100% + 0.25rem);
  height: 0.35rem;
  border: 1.5px solid var(--bok-bla);
  border-top: 0;
}
.merket-kode .del::after {
  content: attr(data-navn);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 0.7rem);
  font-family: var(--bs-body-font-family, sans-serif);
  font-size: 0.82rem;
  color: var(--tekst-dempet);
  white-space: nowrap;
}
.merket-kode .del.over::before {
  top: auto;
  bottom: calc(100% + 0.25rem);
  border-top: 1.5px solid var(--bok-bla);
  border-bottom: 0;
}
.merket-kode .del.over::after {
  top: auto;
  bottom: calc(100% + 0.7rem);
}

/* ---------- The two parts after the teaching sections ----------
   Oppsummering and Oppgaver open with the same solid heading band,
   so the student sees at once that the teaching part has ended.
   The summary sits in a light panel, so it is also clear where it
   ends. */
section.oppsummering,
section.oppgaver {
  margin-top: 4.5rem;
}
section.oppsummering > h2,
section.oppgaver > h2 {
  margin: 0 0 1.4rem;
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--del-bg);
  color: var(--del-tekst);
  font-size: 1.65rem;
}
section.oppsummering > h2 .anchorjs-link,
section.oppgaver > h2 .anchorjs-link {
  color: var(--del-tekst) !important;
}

/* Summary panel */
section.oppsummering {
  padding: 0 1.25rem 1.1rem;
  background: var(--sammen-bg);
  border: 1px solid var(--sammen-kant);
  border-radius: 0.5rem;
}
section.oppsummering > h2 {
  margin: 0 -1.25rem 1.4rem;
  border-radius: 0.5rem 0.5rem 0 0;
  border-bottom: 1px solid var(--sammen-kant);
  background: var(--sammen-tittel-bg);
  color: var(--sammen-tittel-tekst);
}
section.oppsummering > h2 .anchorjs-link {
  color: var(--sammen-tittel-tekst) !important;
}
section.oppsummering h3 {
  margin-top: 2rem;
}

/* Summary: code with its output directly below */
.oppsv .utskrift .code-with-filename {
  margin-top: 1.7rem;
}

/* ---------- Exercises ------------------------------------------- */
main h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 2.4rem;
  margin-bottom: 0.7rem;
}
/* A thin rule above each exercise keeps them apart */
section.oppgaver section.level4 > h4 {
  margin-top: 2.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--kode-kant);
}
section.oppgaver > section.level3 > h3 {
  margin-top: 3.2rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--del-bg);
}
section.oppgaver > section.level4:first-of-type > h4,
section.oppgaver > section.level3 > section.level4:first-of-type > h4 {
  border-top: none;
  padding-top: 0;
}

/* S tasks: a star in the margin */
section.s-oppgave > h4 {
  position: relative;
}
section.s-oppgave > h4::before {
  content: "\2605" / "Utfordring";
  position: absolute;
  left: -1.7rem;
  color: var(--stjerne);
  font-size: 1.25em;
  line-height: 1.1;
}
@media (max-width: 767.98px) {
  section.s-oppgave > h4::before {
    position: static;
    margin-right: 0.4rem;
  }
}

/* Keyboard keys */
kbd {
  font-size: 0.82em;
  padding: 0.05em 0.4em;
  border: 1px solid var(--kode-kant);
  border-bottom-width: 2px;
  border-radius: 0.25rem;
  background: var(--utskrift-bg);
  color: var(--tekst);
}

/* Same line height on every code line, so that marked lines touch */
pre > code.sourceCode > span {
  line-height: 1.55;
}


/* ---------- Table of contents page (innhold.qmd) ---------------- */
.innhold h3 {
  margin-top: 2.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--del-bg);
}
.innhold dl {
  margin: 0;
}
.innhold dt {
  margin-top: 1rem;
  font-weight: 600;
}
.innhold dd {
  margin: 0.15rem 0 0;
  color: var(--tekst-dempet);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Plain text that is neither output nor algorithm, e.g. a folder tree */
:not(.utskrift):not(.oppskrift) > .code-with-filename > pre:not(.sourceCode) {
  margin: 0;
  padding: 0.7rem 0.9rem;
  background: var(--kode-bg);
  border: 1px solid var(--kode-kant);
  border-radius: 0.4rem;
  border-top-right-radius: 0;
  font-size: 0.875rem;
  line-height: 1.55;
}

/* The page contents stay visible even when the page is opened
   straight from the disk, where the browser blocks Quarto's script */
#TOC > ul.collapse {
  display: block;
}

/* Long code lines wrap instead of scrolling sideways, so that no part
   of the code is hidden. A wrapped line keeps its single line number. */
pre > code.sourceCode {
  white-space: pre-wrap !important;
}
pre > code.sourceCode > span {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Short code in tables is never split over two lines */
main td code:not(.sourceCode) {
  white-space: nowrap;
}

/* Smal skjerm: inline-kode får brytes, og brede tabeller kan rulles sidelengs */
main p code, main li code, main td code, .callout code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  main table { display: block; overflow-x: auto; }
}

/* Fanen: mappenavn i grått, filnavn i vanlig skrift (for eksempel 10-2-forste-program/skript.js) */
.code-with-filename-file .fil-mappe {
  font-weight: 400;
  opacity: 0.6;
}

/* ---------- Ren tekst som skal merkes opp (.rentekst) -----------
   En tekstfil uten HTML. Lange linjer brytes, slik de gjør i en
   editor med linjebryting, og en knapp kopierer hele teksten. */
.rentekst {
  position: relative;
}
.rentekst .code-with-filename > pre,
.rentekst pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding-right: 2.8rem;
}
.rentekst pre code {
  white-space: pre-wrap;
}
.rentekst-kopier {
  position: absolute;
  top: 0.55rem;
  right: 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: none;
  border-radius: 0.35rem;
  background: transparent;
  color: var(--fane-tekst);
  cursor: pointer;
  z-index: 2;
}
.rentekst-kopier:hover,
.rentekst-kopier:focus-visible {
  background: var(--fane-bg);
}
.rentekst-kopier svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* ---------- SQL-boks: SQLite i nettleseren ------------------------ */
.sql-boks {
  margin: 1rem 0 1.25rem;
  border: 1px solid var(--kode-kant);
  background: var(--kode-bg);
}
.sql-topp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem 0.3rem 0.75rem;
  border-bottom: 1px solid var(--kode-kant);
}
.sql-tittel {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--fane-tekst);
}
.sql-knapper { display: flex; gap: 0.4rem; }
.sql-boks button {
  font-size: 0.85rem;
  padding: 0.2rem 0.75rem;
  border-radius: 4px;
  border: 1px solid var(--brikke-kant);
  background: var(--utskrift-bg);
  color: var(--tekst);
  cursor: pointer;
}
.sql-boks button.sql-kjor {
  background: var(--bok-bla);
  border-color: var(--bok-bla);
  color: #ffffff;
  font-weight: 600;
}
body.quarto-dark .sql-boks button.sql-kjor { color: #10161c; }
.sql-boks button:focus-visible { outline: 3px solid var(--bok-bla); outline-offset: 2px; }
.sql-kode {
  display: block;
  width: 100%;
  min-height: 3rem;
  resize: vertical;
  border: none;
  background: transparent;
  color: var(--tekst);
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 0.6rem 0.75rem;
  overflow: hidden;
}
.sql-kode:focus { outline: 2px solid var(--bok-bla); outline-offset: -2px; }
.sql-resultat:empty { display: none; }
.sql-resultat {
  background: var(--utskrift-bg);
  border-top: 1px solid var(--kode-kant);
  padding: 0.5rem 0.75rem 0.25rem;
  overflow-x: auto;
}
.sql-tabell table {
  border-collapse: collapse;
  font-size: 0.875rem;
  border-top: 1.5px solid var(--tabell-strek);
  border-bottom: 1.5px solid var(--tabell-strek);
  margin: 0.25rem 0 0.25rem;
}
.sql-tabell th {
  text-align: left;
  font-weight: 600;
  border-bottom: 0.75px solid var(--tabell-strek);
  padding: 0.22rem 1.4rem 0.22rem 0;
}
.sql-tabell td { padding: 0.15rem 1.4rem 0.15rem 0; }
.sql-tabell .tall { text-align: right; font-variant-numeric: tabular-nums; }
.sql-tabell .null { color: var(--tekst-dempet); font-style: italic; }
.sql-melding { color: var(--tekst-dempet); font-size: 0.85rem; margin: 0.2rem 0 0.4rem; }
.sql-feil { color: #b3261e; font-size: 0.85rem; margin: 0.2rem 0 0.4rem; }
body.quarto-dark .sql-feil { color: #ff8a80; }