/* ================================================================
   lifeviewer.css
   WCAG 2.1 AA compliant styles for LifeViewer.
   ================================================================ */

/* ----------------------------------------------------------------
   Box model
   ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ----------------------------------------------------------------
   Base
   WCAG 1.4.4  – Resize Text: rem units respect the browser default.
   WCAG 1.4.12 – Text Spacing: permissive line-height / spacing so
                 user style-sheets can override without breaking layout.
   WCAG 1.4.3  – Contrast: #1a1a1a on #ffffff > 15 : 1.
   ---------------------------------------------------------------- */
body {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #1a1a1a;
  background: #ffffff;
  margin: 1rem;
}

/* ----------------------------------------------------------------
   Skip link – WCAG 2.4.1 Bypass Blocks
   ---------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 0;
  background: #005fcc;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0 0 0.25rem 0.25rem;
  font-weight: bold;
  text-decoration: none;
  z-index: 100;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}

/* ----------------------------------------------------------------
   Visually hidden – hides content from sighted users while keeping
   it available to screen readers and the accessibility tree.
   WCAG 2.4.6 – Headings and Labels: the heading must still exist
   in the DOM; display:none or visibility:hidden would remove it.
   ---------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------------
   Main viewer wrapper
   ---------------------------------------------------------------- */
.viewer {
  width: 100%;
}

/* ----------------------------------------------------------------
   Canvas
   WCAG 1.4.3 – UI component border meets 3 : 1 against white.

   No width/height/aspect-ratio overrides here. The LifeViewer plugin
   manages canvas dimensions directly via JavaScript; any CSS sizing
   fights the plugin and produces wrong aspect ratios. We only add the
   border as a non-dimensional style.
   ---------------------------------------------------------------- */
#ViewerCanvas {
  display: block;
  border: 2px solid #555;
}

/* ----------------------------------------------------------------
   Controls layout
   Flexbox replaces the layout <table>.
   WCAG 1.3.1 – Info and Relationships
   WCAG 1.3.2 – Meaningful Sequence
   ---------------------------------------------------------------- */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.25rem;
  align-items: flex-start;
}

.controls__group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* ----------------------------------------------------------------
   Labels – WCAG 1.3.1 / 4.1.2
   ---------------------------------------------------------------- */
label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1a1a1a;
}

/* ----------------------------------------------------------------
   Hint text (replaces inline style="font-size:…;color:…")
   WCAG 1.4.3 – #444 on white = 9.7 : 1, passes AA.
   ---------------------------------------------------------------- */
.field-hint {
  font-size: 0.8125rem;
  color: #444444;
}

/* ----------------------------------------------------------------
   Textareas
   ---------------------------------------------------------------- */
textarea {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  border: 2px solid #555;
  border-radius: 0.25rem;
  padding: 0.375rem 0.5rem;
  resize: vertical;
  width: 100%;
  color: #1a1a1a;
  background: #ffffff;
}

textarea:focus {
  /* WCAG 2.4.7 / 2.4.11 – Focus Visible / Not Obscured */
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  border-color: #005fcc;
}

/* ----------------------------------------------------------------
   View button
   WCAG 1.4.3  – #ffffff on #005fcc ≈ 5.9 : 1 (passes AA).
   WCAG 2.5.5  – Target Size: min 44 × 44 CSS px.
   WCAG 2.4.7  – Focus Visible.
   ---------------------------------------------------------------- */
#viewbutton {
  align-self: flex-end;
  padding: 0.625rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  background: #005fcc;
  color: #ffffff;
  border: 2px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  white-space: nowrap;
  min-width: 6rem;
  min-height: 2.75rem;
}

#viewbutton:hover {
  background: #004aaa;
}

#viewbutton:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
  border-color: #ffffff;
}

#viewbutton:active {
  background: #003888;
}