:root{
  --max-form-width: 560px;
  --tab-font: 18px;
  --tab-pad-v: 12px;
  --tab-pad-h: 12px;
  --btn-font: 20px;
  --btn-pad-v: 10px;
  --btn-pad-h: 18px;
  --input-font: 18px;
  --input-pad-v: 10px;
  --input-pad-h: 12px;
  --metrics-font: 16px;
}
body { font-family: Arial, sans-serif; margin: 18px; color:#111; }
h2 { text-align:center; margin: 6px 0 14px; font-size: 24px; }

.tabs { display: flex; width: 100%; margin: 0 0 12px 0; }
.tab-btn {
  flex: 1 1 0;
  padding: var(--tab-pad-v) var(--tab-pad-h);
  border: 1px solid #999;
  background:#f5f5f5;
  cursor:pointer;
  border-radius:8px 8px 0 0;
  font-weight:700;
  text-align:center;
  font-size: var(--tab-font);
  line-height: 1.15;
}
.tab-btn + .tab-btn { border-left-width: 0; }
.tab-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.tab-btn.active { background:#fff; border-bottom-color: #fff; }

.tab-content {
  border:1px solid #999; border-radius:0 8px 8px 8px; padding: 14px;
  max-width: 980px; margin: 0 auto; background:#fff;
}
.hidden { display:none; }

fieldset { border:1px solid #999; padding: 12px 14px; margin-bottom:12px;
           max-width: var(--max-form-width); margin-left:auto; margin-right:auto; text-align:left; }
legend { font-weight:bold; font-size: 18px; }
label { display:inline-block; min-width: 170px; font-size: var(--input-font); }
input, button { margin: 6px; padding: var(--input-pad-v) var(--input-pad-h); font-size: var(--input-font); }
input[type="text"], input[type="date"], input[type="number"] {
  width: calc(100% - 210px);
  max-width: 340px;
}
@media (max-width: 560px){
  label { min-width: 140px; }
  input[type="text"], input[type="date"], input[type="number"] { width: calc(100% - 180px); }
}
input.invalid { border:2px solid #e00; background:#fff8f8; }
.error-msg { color:#b00020; font-size:14px; margin:6px 0 0 0; display:none; }
.error-msg.show { display:block; }
.helper { text-align:center; color:#444; margin: 8px 0; font-size: 15px; }
.helper.one-line { white-space: nowrap; }

#measureBtn, #deleteLastBtn, #endSurveyBtn, #saveResultsBtn, #clearDataBtn, #gotoMeasureBtn {
  font-size: var(--btn-font);
  padding: var(--btn-pad-v) var(--btn-pad-h);
  border-radius: 8px;
  border: none;
}
#measureBtn { color:#fff; font-weight: 700; }
#endSurveyBtn { color:#fff; font-weight: 700; background:#c62828; }
.btn-disabled { background-color:#999 !important; opacity:0.9; }
button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body, button, input { -webkit-user-select: none; user-select: none; }

.metrics-bar-top, .metrics-bar {
  max-width: var(--max-form-width);
  margin: 6px auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: monospace;
  font-size: var(--metrics-font);
  border-bottom: 1px solid #ddd;
}
.metrics-row { display: flex; gap: 24px; align-items: baseline; }
.metrics-row--top { justify-content: space-between; align-items: center; }
.metric { display:flex; gap: 10px; }
.metric .label { font-weight:700; min-width: 110px; white-space: pre; display: inline-block; }
.metric .value { white-space: pre; text-align:left; }

.quality-chip {
  padding: 6px 10px;
  border-radius: 14px;
  font-family: monospace;
  font-size: var(--metrics-font);
  border: 1px solid rgba(0,0,0,0.15);
  background: #eee; color: #222;
  white-space: nowrap;
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}
.quality-poor  { background:#ffe5e5; color:#8a0000; }
.quality-low   { background:#fff3cd; color:#7a5a00; }
.quality-fair  { background:#e3f2fd; color:#0b5394; }
.quality-good  { background:#e6ffed; color:#0b6b2a; }
.quality-vgood { background:#c8f7c5; color:#085a14; font-weight: bold; }

.canvas-wrap { position: relative; width: 100%; max-width: var(--max-form-width); margin: 6px auto 10px; }
canvas { border: 2px solid #333; background: #fff; display: block; margin: 0 auto 8px auto; width: 100%; height: auto; }
#canvas { width: 100%; max-width: var(--max-form-width); }

table.results-fixed {
  border-collapse: collapse;
  width: fit-content;
  max-width: 100%;
  margin: 10px auto;
  font-size: 16px;
  font-family: monospace;
}
table.results-fixed th, table.results-fixed td { border:1px solid #ccc; padding: 6px 8px; }
table.results-fixed th, table.results-fixed td { text-align: right; }
table.results-fixed th:first-child, table.results-fixed td:first-child { text-align: left; }

.summary { max-width: var(--max-form-width); margin: 10px auto; font-family: monospace; white-space: pre; font-size: 15px; }
.summary h3 { margin: 6px 0 8px; font-family: Arial, sans-serif; font-weight: bold; white-space: normal; font-size: 18px; }

@media (max-width: 420px){
  :root{ --tab-font: 16px; --tab-pad-v: 10px; --tab-pad-h: 10px; --btn-font: 19px; }
  .metric .label { min-width: 96px; }
}


/* ===== Final Overrides (2025-10-12) ===== */
/* Measurements: remove pseudo-colons to avoid duplication and keep tight gaps */
.metrics-bar-top .metric,
.metrics-bar .metric { gap: 6px !important; }
.metrics-bar-top .metric .label::after,
.metrics-bar .metric .label::after { content: "" !important; }

/* Remove borders on tab buttons and the Measurements tab content panel */
.tabs .tab-btn { border: none !important; }
.tab-btn + .tab-btn { border-left-width: 0; }
#measureTab { border: none !important; }

/* Results summary alignment: monospace spans aligned by JS, consecutive lines (no extra spacing) */
.summary { white-space: normal !important; }
.summary span { font-family: monospace; white-space: pre !important; display: block; margin: 0 !important; }