/* Tube mill water point survey
   Visual source: ASME A13.1 pipe marking (green band = water).
   One bold element: the green hanging tag with the point number. */

:root {
  --green: #0B6B3A;
  --green-dark: #08502B;
  --green-tint: #E3F0E8;
  --ink: #16201B;
  --steel: #E4E7E5;
  --steel-line: #B9C0BC;
  --white: #FFFFFF;
  --yellow: #F6C700;
  --yellow-tint: #FFF6CC;
  --red: #B3261E;

  --font: "Atkinson Hyperlegible", "Segoe UI", Roboto, Arial, sans-serif;
  --step-1: 1.25rem;   /* 20px body */
  --step-2: 1.5rem;    /* 24px */
  --step-3: 2rem;      /* 32px */
  --step-4: 2.75rem;   /* 44px */
  --tap: 4rem;         /* 64px minimum tap target */
  --radius: 6px;
}

* { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-padding: 1rem 0 7rem; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink);
  background: var(--steel);
}

img { max-width: 100%; display: block; }

.wrap {
  max-width: 35rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 8rem;
}

/* ---------- page heading ---------- */

.band {
  background: var(--green);
  color: var(--white);
  padding: 1.1rem 1rem 1.2rem;
}
.band-inner { max-width: 35rem; margin: 0 auto; }
.band h1 {
  margin: 0;
  font-size: var(--step-3);
  line-height: 1.1;
  font-weight: 700;
}
.band p { margin: 0.35rem 0 0; font-size: var(--step-1); opacity: 0.92; }

h2 {
  font-size: var(--step-2);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

.lead { margin: 0 0 1.25rem; max-width: 32ch; }

.rules {
  background: var(--white);
  border-left: 0.5rem solid var(--green);
  padding: 0.9rem 1rem;
  margin: 0 0 1.5rem;
}
.rules p { margin: 0; }
.rules p + p { margin-top: 0.5rem; }

/* ---------- the tag (the one bold element) ---------- */

.tag {
  position: relative;
  flex: none;
  width: 5.25rem;
  min-height: 5.75rem;
  background: var(--green);
  color: var(--white);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  padding-top: 1rem;
  font-weight: 700;
  font-size: var(--step-4);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* punched hole */
.tag::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 50%;
  width: 0.8rem;
  height: 0.8rem;
  margin-left: -0.4rem;
  border-radius: 50%;
  background: var(--steel);
  box-shadow: inset 0 0 0 2px var(--green-dark);
}
.tag small { display: block; font-size: 0.9rem; font-weight: 400; opacity: 0.85; margin-top: 0.15rem; }

.tag.big { width: 6.5rem; min-height: 7rem; font-size: 3.5rem; }

/* ---------- point list ---------- */

.points { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.points li + li { margin-top: 0.75rem; }

.point {
  display: flex;
  gap: 1rem;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 0.75rem;
  cursor: pointer;
}
.point:hover { background: #FAFBFA; }
.point .tag, .sum-row .tag { align-self: start; }
.point-body { min-width: 0; flex: 1; }
.point-where { font-weight: 700; font-size: var(--step-2); line-height: 1.2; margin: 0.1rem 0 0.25rem; }
.point-meta { margin: 0; }
.thumbs { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.thumbs img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 3px; border: 1px solid var(--steel-line); }

.needs {
  display: inline-block;
  margin-top: 0.5rem;
  background: var(--yellow-tint);
  border-left: 0.35rem solid var(--yellow);
  padding: 0.15rem 0.5rem;
  font-size: 1.05rem;
}

.empty {
  background: var(--white);
  border: 2px dashed var(--steel-line);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 0 0 1.5rem;
}
.empty p { margin: 0; }

/* ---------- buttons ---------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--tap);
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: var(--step-2);
  font-weight: 700;
  border-radius: var(--radius);
  border: 2px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--green); border-color: var(--green-dark); color: var(--white); }
.btn-primary:hover { background: var(--green-dark); }
.btn-quiet { border-color: transparent; background: transparent; text-decoration: underline; font-weight: 400; font-size: var(--step-1); }
.btn-danger { border-color: var(--red); color: var(--red); }
.btn-danger.armed { background: var(--red); color: var(--white); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.plus { font-size: 2.2rem; line-height: 0; margin-right: 0.6rem; font-weight: 400; }

:focus-visible { outline: 4px solid var(--yellow); outline-offset: 2px; }

/* ---------- form ---------- */

.form-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.5rem; }
.form-head h2 { margin: 0; }
.form-head p { margin: 0.25rem 0 0; }

.step {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1rem 1rem 1.25rem;
  margin: 0 0 1rem;
  border-top: 0.5rem solid var(--green);
}
.step-title {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.35rem;
}
.step-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 1.2rem;
  transform: translateY(0.35rem);
}
.hint { margin: 0 0 0.9rem; color: #3B4640; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.choices.one-col { grid-template-columns: 1fr; }

.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.choice span {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--tap);
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--steel-line);
  border-radius: var(--radius);
  background: var(--white);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.choice input:checked + span {
  border-color: var(--green);
  background: var(--green-tint);
  box-shadow: inset 0 0 0 2px var(--green);
}
.choice input:focus-visible + span { outline: 4px solid var(--yellow); outline-offset: 2px; }

.swatch { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid rgba(0,0,0,0.25); }
.sw-copper { background: linear-gradient(135deg, #D08A4E, #9A5A2A); }
.sw-plastic { background: #F4F4F0; }
.sw-metal { background: linear-gradient(135deg, #A4ABAA, #6E7675); }
.sw-other { background: repeating-linear-gradient(45deg, #fff 0 4px, #C9CECB 4px 8px); }

label.field { display: block; font-weight: 700; margin: 0.9rem 0 0.35rem; }
.input {
  width: 100%;
  min-height: var(--tap);
  padding: 0.6rem 0.8rem;
  font: inherit;
  font-size: 1.375rem;
  border: 2px solid var(--steel-line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}
.input:focus { border-color: var(--green); }
textarea.input { min-height: 6rem; resize: vertical; }

.measure-row { display: flex; align-items: center; gap: 0.75rem; }
.measure-row .input { max-width: 9rem; font-size: var(--step-3); font-weight: 700; text-align: center; }
.unit { font-size: var(--step-2); font-weight: 700; }

.diagram { width: 100%; max-width: 20rem; margin: 0 0 1rem; }

.estimate {
  margin: 0.9rem 0 0;
  padding: 0.6rem 0.8rem;
  background: var(--green-tint);
  border-radius: var(--radius);
  font-weight: 700;
}
.estimate.unsure { background: var(--yellow-tint); }
.estimate:empty { display: none; }

.check { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.9rem; min-height: var(--tap); cursor: pointer; }
.check input { width: 1.75rem; height: 1.75rem; accent-color: var(--green); }

/* photos */
.shots { display: grid; gap: 0.75rem; }
.shot {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  border: 2px dashed var(--steel-line);
  border-radius: var(--radius);
  padding: 0.6rem;
  min-height: 6.5rem;
  background: #FAFBFA;
}
.shot.has { border-style: solid; border-color: var(--green); background: var(--white); }
.shot-img {
  flex: none;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 4px;
  background: var(--steel);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.shot-img img { width: 100%; height: 100%; object-fit: cover; }
.shot-img svg { width: 2.4rem; height: 2.4rem; }
.shot-text { flex: 1; min-width: 0; }
.shot-text b { display: block; line-height: 1.2; }
.shot-text span { display: block; font-size: 1.05rem; color: #3B4640; }
.shot-actions { display: flex; gap: 0.5rem; margin-top: 0.4rem; flex-wrap: wrap; }
.mini {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.3rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--white);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}
.mini.go { background: var(--green); border-color: var(--green-dark); color: var(--white); }
.mini input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }

/* bottom bar */
.bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--white);
  border-top: 2px solid var(--ink);
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
}
.bar-inner { max-width: 35rem; margin: 0 auto; display: flex; gap: 0.75rem; }
.bar-inner .btn-quiet { width: auto; flex: none; }

.error {
  background: #FBE9E7;
  border-left: 0.5rem solid var(--red);
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  font-weight: 700;
}
.error:empty { display: none; }

.toast {
  position: fixed;
  left: 50%;
  top: 1rem;
  transform: translate(-50%, -150%);
  background: var(--ink);
  color: var(--white);
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius);
  font-weight: 700;
  transition: transform 0.25s ease-out, visibility 0s 0.25s;
  visibility: hidden;
  z-index: 10;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; transition: transform 0.25s ease-out; }

.danger-zone { margin-top: 2rem; }

.locked { padding: 2rem 1rem; }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* ---------- summary page ---------- */

.summary .wrap { max-width: 64rem; padding-bottom: 3rem; }
.sum-head { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.sum-head .btn { width: auto; }
.counts { margin: 0; }

.sum-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 0.75rem;
  break-inside: avoid;
}
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1rem; margin: 0; }
.facts dt { color: #3B4640; }
.facts dd { margin: 0; font-weight: 700; }
.sum-photos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.sum-photos figure { margin: 0; }
.sum-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.sum-photos figcaption { font-size: 1rem; color: #3B4640; }
.sum-photos .missing { aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--yellow-tint); border-radius: 4px; font-size: 1rem; }

@media (min-width: 48rem) {
  .sum-row { grid-template-columns: auto 1fr 1.4fr; }
  .sum-photos { grid-column: auto; }
}

@media print {
  body { background: #fff; font-size: 12pt; }
  .band { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tag { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .no-print { display: none !important; }
  .sum-row { border-width: 1px; }
}