/*
Optional components. Load after base.css only when a page uses the
feature. Each block is self-contained and drops in cleanly.

Syntax highlighting: class-based, no JS. Hand apply the spans or wire up
a highlighter.
*/

/* Syntax tokens */
.tok-keyword {
  color: var(--code-keyword);
}

.tok-string {
  color: var(--code-string);
}

.tok-number {
  color: var(--code-number);
}

.tok-function {
  color: var(--code-function);
}

.tok-type {
  color: var(--code-type);
}

.tok-constant {
  color: var(--code-constant);
}

.tok-comment {
  color: var(--code-comment);
}

/* Code line numbers - opt in with class="line-numbers" on pre. Write
   each line as an inline <span class="line">; the newline between spans
   is the line break, so no <br> is needed. Keep spans flush-left in the
   markup (pre-wrap preserves stray indentation) with no trailing newline
   before </pre>. Counters number the logical lines; wrapped continuations
   get no marker. Inline spans only: block-level children of a pre pick up
   phantom line boxes in Chrome (verified).
   The gutter is --no (number column), grows at 10+ and 100+ lines via
   :has(); right-aligned numbers keep a steady gap before the divider. */
pre.line-numbers {
  counter-reset: line;
  --no: 1.5ch;   /* number column: 1 digit */
  --clear: 0.5ch; /* clearance before the divider */
  --gap: 0.5ch;   /* gap after the divider */
  padding-left: calc(var(--no) + var(--clear) + 1px + var(--gap));
  /* 1px divider at the gutter edge; background-image avoids an extra box
     and stays fixed while content scrolls */
  background-image: linear-gradient(to right, var(--code-comment) 0 1px, transparent 1px);
  background-position: calc(var(--no) + var(--clear) + 1px) 0;
  background-size: 1px 100%;
  background-repeat: no-repeat;
}

pre.line-numbers:has(> span.line:nth-child(10)) {
  --no: 2.5ch; /* 2-digit numbers */
}

pre.line-numbers:has(> span.line:nth-child(100)) {
  --no: 3.5ch; /* 3-digit numbers */
}

pre.line-numbers > span.line {
  position: relative;
  counter-increment: line;
  white-space: pre-wrap;
}

pre.line-numbers > span.line::before {
  content: counter(line);
  position: absolute;
  left: calc(-1 * (var(--no) + var(--clear) + 1px + var(--gap))); /* hang into gutter */
  width: var(--no);
  text-align: right;
  color: var(--code-comment);
}

/* Status Markers & Colours */
.status-marker {
  display: inline-block;
  vertical-align: -0.25em;
  width: var(--status-marker-size);
  max-width: var(--status-marker-size);
  min-width: var(--status-marker-size);
  height: var(--status-marker-size);
  max-height: var(--status-marker-size);
  min-height: var(--status-marker-size);
  clip-path: circle();
}

.success {
  color: var(--text-success);
}

.bg-success {
  background-color: var(--success);
}

.warning {
  color: var(--text-warning);
}

.bg-warning {
  background-color: var(--warning);
}

.danger {
  color: var(--text-danger);
}

.bg-danger {
  background-color: var(--danger);
}

.failure {
  color: var(--text-failure);
}

.bg-failure {
  background-color: var(--failure);
}

.disabled {
  color: var(--text-disabled);
}

.bg-disabled {
  background-color: var(--disabled);
}

.unknown {
  color: var(--text-disabled);
}

.bg-unknown {
  background-color: var(--disabled);
}

.bg-success,
.bg-warning,
.bg-danger,
.bg-failure,
.bg-disabled,
.bg-unknown {
  color: var(--highlight-font-color);
}

/* Hover Popup */
.popup-container {
  position: relative;
  display: inline-block;
  margin-top: 0;
}

.popup-trigger {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
}

.popup-content {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--background-color);
  color: var(--text-color);
  border: var(--border-thickness) solid var(--text-color);
  padding: calc(var(--line-height) / 2 - var(--border-thickness)) calc(1ch - var(--border-thickness));
  width: calc(round(down, 20ch, 1ch));
  text-align: left;
  line-height: var(--line-height);

  display: flex;
  flex-direction: column;
}

.popup-container:hover .popup-content {
  visibility: visible;
}

/* Arrow */
.popup-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--text-color) transparent transparent transparent;
}

/* History Line */
.history-line {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: calc(var(--border-thickness) * 2.5);
}

.history-marker {
  width: calc(var(--border-thickness) * 4);
  margin-top: 0;
}

.entry-date {
  color: var(--text-color-alt);
}

.entry-content {
  margin-top: 1ch;
  display: flex;
  flex-direction: row;
  gap: 1ch;
}

.entry-notes {
  margin-top: 0;
}

.footer-box {
  position: absolute;
  left: calc(50% - 51ch / 2);
  font-size: 0.85rem;
  /* 1.1em line height clears Commit Mono's 1.045em box-glyph ink so
     adjacent ░ glyphs never touch or overlap */
  line-height: 1.1;
  /* footer-box is a positioned footer, not a code panel - drop the pre
     styling */
  border: none;
  background: none;
  padding: 0;
}

.separator {
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
  gap: calc(var(--border-thickness) * 4);
  height: var(--line-height);
  margin: calc(var(--line-height) * 1.5) 0;
  border: none;
  color: var(--text-color);
  max-width: var(--measure);
}

.separator::before,
.separator::after {
  content: "";
  top: calc(var(--line-height) / 2 - var(--border-thickness));
  left: 0;
  width: 100%;
  border-top: calc(var(--border-thickness) * 3) double var(--text-color);
  flex: 1;
  height: 0;
}