/* Flat-control reset — square every native control + button so nothing
   inherits the browser/OS rounded corners. (Radio + checkbox keep their
   native round/check rendering — that's conventional, not "rounded borders".) */
button, input, select, textarea { border-radius: 0; }

/* Text-like inputs + textareas: flat, bordered, themed fields */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #888;
  background-color: #fff;
  color: var(--text-body);
  font: inherit;
  padding: 0.4rem 0.5rem;
}
/* Selects: square + bordered, but keep the native dropdown arrow (no gradients). */
select {
  border: 1px solid #888;
  background-color: #fff;
  color: var(--text-body);
  font: inherit;
  padding: 0.4rem 0.5rem;
}

/* Sortable table-header buttons (Register tool) had no rule → default rounded.
   Give them a flat, borderless, left-aligned look that fits table headers. */
.sort-btn {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  padding: 0.25rem 0.4rem;
  cursor: pointer;
  text-align: left;
}
.sort-btn:hover { background: rgba(0, 0, 0, 0.06); }

/* ---- Shared tool patterns (used across multiple tool pages) ---- */

/* Horizontal control rows */
.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* Space out free-standing button rows inside panels (export/import sections). */
.panel > .btn, .panel > label.btn { margin: 0.2rem 0.5rem 0.2rem 0; }
.toolbar > .btn, .toolbar > label.btn { margin: 0; }   /* gap handles toolbar spacing */

/* Progress bar (Monte Carlo + FAIR) */
#progress-container {
  height: 1.25rem;
  border: 1px solid #888;
  background: #fff;
  margin: 0.75rem 0;
  overflow: hidden;
}
#progress-bar {
  height: 100%;
  width: 0;
  background: #2e7d32;
}

/* Inline validation error text (Monte Carlo + FAIR) */
.error { color: #b71c1c; font-weight: 600; margin: 0.35rem 0 0; }
.error:empty { margin: 0; }

/* Result charts (Monte Carlo + FAIR) — responsive + framed */
#histogram-svg, #lec-svg {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid #bbb;
  background: #fff;
  margin: 0.25rem 0 1.25rem;
}

/* Summary statistics table (Monte Carlo + FAIR) */
#summary-table { border-collapse: collapse; min-width: 18rem; margin: 0.25rem 0 1rem; }
#summary-table th, #summary-table td { border: 1px solid #bbb; padding: 0.35rem 0.7rem; }
#summary-table thead th { background: #cfcabf; text-align: left; }
#summary-table tbody th { text-align: left; font-weight: 600; }
#summary-table tbody td { text-align: right; font-variant-numeric: tabular-nums; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;        /* WCAG 2.2 SC 2.5.5 */
  padding: 0.5rem 1rem;
  background-color: var(--fill-control);
  background-image: var(--noise);
  background-blend-mode: multiply;
  border: 1px solid #888;
  border-radius: var(--radius-ui);
  box-shadow:
    inset 0 1px 0 var(--bevel-hi),
    inset 0 -1px 0 var(--bevel-lo),
    var(--drop-shadow);
  color: var(--text-body);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);   /* decorative; not used for contrast */
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background-color: var(--fill-control-hover); }
.btn:active {
  box-shadow: inset 0 1px 2px var(--bevel-lo), inset 0 -1px 0 var(--bevel-hi);
  transform: translateY(1px);
}
.btn-primary { font-weight: 700; }
.btn:disabled { color: var(--text-disabled); cursor: not-allowed; border-style: dashed; }

/* Tiles */
.tile {
  display: flex; flex-direction: column;
  min-height: 140px; padding: 1rem;
  background-color: var(--fill-surface);
  background-image: var(--noise);
  background-blend-mode: multiply;
  border: 1px solid #999;
  border-radius: var(--radius-tile);
  box-shadow:
    inset 0 1px 0 var(--bevel-hi),
    inset 0 -2px 0 var(--bevel-lo),
    var(--drop-shadow);
  color: var(--text-body);
  text-decoration: none;
}
.tile h3 { margin: 0 0 0.5rem 0; font-size: 1.1rem; }
.tile p  { margin: 0; font-size: 0.9rem; color: #333; }

/* Panels (for tool pages — Phase 3+) */
.panel {
  background-color: var(--fill-surface);
  background-image: var(--noise);
  background-blend-mode: multiply;
  border: 1px solid #999;
  border-radius: var(--radius-tile);
  padding: 1rem;
  box-shadow: inset 0 1px 0 var(--bevel-hi), var(--drop-shadow);
}

/* 2-layer focus ring — survives any background */
:focus-visible {
  outline: 2px solid #ffeb3b;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #1a1a1a;
}
.btn:focus-visible, .tile:focus-visible { background-color: var(--fill-control-hover); }

/* Motion guards */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-image 0.12s ease-out, transform 0.05s ease-out; }
  .tile { transition: transform 0.15s ease-out; }
  .tile:hover { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}