/* 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 plumbing classes. Colours, fonts and Bootstrap theming live in
# theme_001.css (loaded right after this file); this file only keeps the
# behavioural helpers (hidden, indent, click targets, cookie popup ...).
*/

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;
}

/* On phones the 50px indent pushes lab-form content (buttons, task lists) off the
   right edge. Drop it below the Bootstrap sm breakpoint so content uses the full
   width. */
@media (max-width: 576px) {
  .indent-1 {
    margin-left: 0;
  }
}

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

/* Keyboard-accessible button reset. Lets a native <button> stand in for the
   old click-only inline span/icon controls: focusable, Enter/Space activatable,
   yet visually identical (no default button chrome). Declared BEFORE the
   .clickme* colour classes below so those colours still win the cascade on
   converted controls; controls with no colour class inherit their surroundings. */
.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 (e.g. a clickable card header):
   strips the button's default chrome but keeps the element's own
   padding / background / bottom-border coming from its other classes. */
.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;
}

/* Touch targets: the icon-only action controls (edit / Excel / MATLAB / trash on
   experiment rows, and similar icon buttons) render at ~20px, below the ~40px
   comfortable tap size. Pad any button that wraps a small icon so the clickable
   area grows to ~36px without changing the icon itself. Scoped with :has() to
   buttons that actually contain an .icon-1, so text-only .vlabs-clickbtn controls
   (task titles, etc.) keep their zero padding and current layout. */
.vlabs-clickbtn:has(> img.icon-1) {
  display: inline-block;
  padding: 8px;
}

/* Click targets. A .btn carries its own colours through theme_001.css, so the
   red is only applied to non-button 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;
}