/* This code is part of a computer software VLabs developed and fully owned
# by Dr. Red Oy. All rights reserved.
# (c) Dr. Red Oy, 2021-2026
#
# Site-wide behavioural helpers; theming is in theme_001.css.
*/

form .error {
  color: var(--vl-red);
}

code {
  font-family: var(--vl-font-mono);
  color: var(--vl-red-deep);
  background-color: var(--vl-ground);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 95%;
}

pre {
  font-family: var(--vl-font-mono);
  color: var(--vl-ink);
  background-color: var(--vl-ground);
  padding: .75rem 1rem;
  border-radius: var(--vl-radius);
  font-size: 95%;
}

blockquote {
  background: var(--vl-ground);
  border-left: 4px solid var(--vl-line);
  margin: 1.5em 2px;
  padding: 0.5em 1rem;
}

.hidden {
  display: none;
}

.indent-1 {
  margin-left: 50px;
}

/* Phone: no 50px indent, so content uses the full width. */
@media (max-width: 576px) {
  .indent-1 {
    margin-left: 0;
  }
}

.outer {
    text-align: left;
}
.inner {
    display: inline-block;
}

/* Button reset: native <button> looks like the old span/icon controls.
   Before the .clickme* colour classes so those still win. */
.vlabs-clickbtn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  line-height: inherit;
  white-space: normal;
  cursor: pointer;
}

/* Same reset for a full-width block control; keeps its own padding. */
.vlabs-blockbtn {
  display: block;
  width: 100%;
  text-align: inherit;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.vlabs-clickbtn:focus-visible {
  outline: 2px solid var(--vl-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.vlabs-blockbtn:focus-visible {
  outline: 2px solid var(--vl-focus);
  outline-offset: -2px;
}

/* Pad icon-only buttons (:has(.icon-1)) to a ~36px tap target. */
.vlabs-clickbtn:has(> img.icon-1) {
  display: inline-block;
  padding: 8px;
}

/* Click targets: red only for non-.btn controls. */
.clickme:not(.btn),
.clickmebold:not(.btn) {
  color: var(--vl-red);
}

.clickme,
.clickmebold,
.clickmeblack {
  cursor: pointer;
}

.clickmeblack {
  color: var(--vl-ink);
}

.cookie-popup-bg {
  background-color: var(--vl-paper);
}
.cookie-popup-button-fixed {
  bottom: 0;
  position: fixed;
  right: 0;
  border-radius: var(--vl-radius-card);
  border: 1px solid var(--vl-line);
}

.textareaMonospaced {
  width:100%;
  font-family: var(--vl-font-mono);
  font-size: medium;
}

.vlabs-underline {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-underline-position: under;
  text-decoration-thickness: 1px;
}

.zBaseElement {
  position: relative;
}

.zTopElement {
  position: absolute;
  z-index: 10000;
}