:root {
  --bulma-code: #353535;
}

/* System dark mode (when data-theme is not set) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bulma-code: #ebecf0;
  }
}

/* Force dark mode */
[data-theme="dark"] {
  --bulma-code: #ebecf0;
}

/* Force light mode */
[data-theme="light"] {
  --bulma-code: #353535;
}

#theme-toggle-button {
  border: none;
  border-radius: 0px;
}

#theme-toggle-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] #theme-toggle-button:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

pre {
  white-space: pre-wrap;
  word-break: break-all;
}

/* Log widget styles */
.log-list {
  font-family: monospace;
  max-height: 75vh;
  overflow-y: scroll;
}
.log-data {
  flex: 1;
  white-space: pre-wrap;
  font-size: 16px;
}
.log-list li {
  transition: background-color 300ms linear;
}
.log-list li:nth-child(odd) {
  background: rgba(0,0,0,0.0125);
}
.log-list li:hover {
  background: white;
  outline: 1px solid rgba(0,0,100,0.25);
}
.log-list li:hover .timestamp {
  background: none;
}
.log-line {
  display: flex;
  flex-flow: row;
}
.timestamp, .log-data {
  padding: 0.25ex 1ch;
}
.timestamp {
  background: rgba(0,0,0,0.05);
  user-select: none;
  min-width: 9ch; /* digits of "3600.00 s" */
  text-align: right;
  text-decoration: none;
  color: inherit;
}
.log-list li:target {
  background: rgba(255,255,0,0.1);
}
.log-list li:target .timestamp {
  background: rgba(255,255,0,0.15);
}

/* Pricing currency toggle */
.pricing-currency-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Hide all price/currency elements by default; show when currency matches */
.price, span.currency-chf, span.currency-usd, span.currency-eur {
  display: none;
}
#pricing-chf:checked ~ * .price.currency-chf { display: block; }
#pricing-usd:checked ~ * .price.currency-usd { display: block; }
#pricing-eur:checked ~ * .price.currency-eur { display: block; }
#pricing-chf:checked ~ * span.currency-chf { display: inline; }
#pricing-usd:checked ~ * span.currency-usd { display: inline; }
#pricing-eur:checked ~ * span.currency-eur { display: inline; }

/* Highlight active toggle label */
#pricing-chf:checked ~ * label[for="pricing-chf"],
#pricing-usd:checked ~ * label[for="pricing-usd"],
#pricing-eur:checked ~ * label[for="pricing-eur"] {
  background-color: var(--bulma-code);
  color: var(--bulma-scheme-main);
  border-color: var(--bulma-code);
}

.pricing-toggle label {
  cursor: pointer;
}

/* Tone down inline link colors to use the --bulma-code accent */
:root {
  --bulma-link-text: var(--bulma-code);
  --bulma-link-text-hover: var(--bulma-code);
  --bulma-link-text-active: var(--bulma-code);
}

.content a, .box a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}

.content a:hover, .box a:hover {
  text-decoration-color: currentColor;
}

/* Accessible link colors on dark backgrounds */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .box a {
    color: var(--bulma-code);
  }
}
[data-theme="dark"] .box a {
  color: var(--bulma-code);
}

.instructions {
  margin-top: 2rem;
  opacity: 0.2;
  font-size: 0.75rem;
  transition: opacity 0.2s;
}

.instructions:hover {
  opacity: 1;
}

/* Cap prose line length for readability */
.content p,
.content li {
  max-width: 80ch;
}