/* =============================================================================
   Disease Monitoring — the field inspection form and its report
   =============================================================================
   Shared with the review screen (pages/diary/disease-review.php), which links
   this same file — the two screens show the same figures and must not disagree
   about what a "High risk" band looks like.

   -----------------------------------------------------------------------------
   THE RISK COLOURS ARE A STATUS PALETTE, NOT A CATEGORICAL ONE
   -----------------------------------------------------------------------------
   Low / Moderate / High / Critical is an ORDERED severity scale, so it is
   encoded as one: green through amber to red, in the order a reader already
   expects from every warning system they have ever met. Reserved for this and
   used for nothing else on the page.

   Every band ships with its LABEL beside the colour, never colour alone — a
   reader who cannot separate red from green still reads "Critical".

   Contrast against white, measured:
     low      #1c6b3f   5.9:1
     moderate #8a6100   4.9:1
     high     #b8500e   4.6:1
     critical #9a2f2f   7.4:1
   ========================================================================== */

:root{
  --dis-low:#1c6b3f;
  --dis-moderate:#8a6100;
  --dis-high:#b8500e;
  --dis-critical:#9a2f2f;
}

/* =============================================================================
   The report, shown the moment an inspection is submitted
   ========================================================================== */
.disreport{
  margin:0 0 var(--gap-2);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
}
.disreport__head{padding:20px 22px 16px; border-bottom:1px solid var(--line)}
.disreport__ref{
  display:inline-block; margin:0 0 8px; padding:3px 10px; border-radius:999px;
  background:var(--surface-2); color:var(--wine-dark);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px; letter-spacing:.03em;
}
.disreport__head h2{margin:0 0 5px; font-size:21px; color:var(--ink)}
.disreport__head p{margin:0; font-size:13.5px; color:var(--ink-3)}

/* The verdict. The number is the largest thing on the page, because it is the
   one figure the inspection exists to produce. */
.disverdict{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:20px 22px; color:#fff;
}
.disreport--low      .disverdict{background:var(--dis-low)}
.disreport--moderate .disverdict{background:var(--dis-moderate)}
.disreport--high     .disverdict{background:var(--dis-high)}
.disreport--critical .disverdict{background:var(--dis-critical)}

.disverdict__n{text-align:center; flex:none}
.disverdict__n b{display:block; font-size:40px; line-height:1; font-weight:700; letter-spacing:-.02em}
.disverdict__n span{display:block; margin-top:4px; font-size:11px; letter-spacing:.1em; opacity:.85}
.disverdict__band strong{display:block; font-size:19px; text-transform:capitalize}
.disverdict__band span{display:block; margin-top:3px; font-size:13.5px; opacity:.92}

/* The working. Shown in full, because the officer supplied nine numbers and got
   back one — and a system that will not show how it got there is one people
   stop believing. */
.disworking{margin:0}
.disworking code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px; color:var(--wine); background:var(--surface-2);
  padding:2px 7px; border-radius:3px;
}
.disworking__how{color:var(--ink-3); font-size:12.5px}
.disreport__foot{
  margin:0; padding:14px 22px 18px; font-size:13px; line-height:1.65;
  color:var(--ink-3); border-top:1px solid var(--line);
}

/* =============================================================================
   The form
   ========================================================================== */
.dis-form{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; margin-top:14px;
}
.dis-fs{
  margin:0 0 20px; padding:16px 18px 18px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2);
}
.dis-fs:last-of-type{margin-bottom:0}
.dis-fs legend{
  padding:0 9px; font-size:12.5px; font-weight:700; color:var(--wine-dark);
  text-transform:uppercase; letter-spacing:.05em;
}
.dis-grid{display:grid; gap:15px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.dis-row label{display:block; margin:0 0 6px; font-size:12.5px; font-weight:600; color:var(--ink)}
.dis-row--wide{grid-column:1/-1; margin-top:14px}
.dis-opt{font-weight:400; color:var(--ink-3); font-size:11.5px}

.dis-row input[type="text"],
.dis-row input[type="date"],
.dis-row input[type="number"],
.dis-row input[type="file"],
.dis-row select,
.dis-row textarea{
  width:100%; padding:9px 11px; font-size:14px; font-family:inherit;
  border:1px solid var(--line); border-radius:6px;
  background:var(--surface); color:var(--ink);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.dis-row input:focus-visible,
.dis-row select:focus-visible,
.dis-row textarea:focus-visible{
  outline:none; border-color:var(--wine); box-shadow:0 0 0 3px rgba(122,20,66,.13);
}
.dis-hint{display:block; margin:6px 0 0; font-size:12px; line-height:1.55; color:var(--ink-3)}
.dis-actions{display:flex; gap:11px; margin:20px 0 0}

.dis-msg{margin:0 0 var(--gap); padding:12px 16px; border-radius:6px; font-size:13.5px; line-height:1.6}
.dis-msg--bad{background:var(--wine-tint); color:var(--wine-dark); border:1px solid var(--line-wine)}

/* =============================================================================
   The band pill — used on both screens
   ========================================================================== */
.disband{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700; color:#fff; white-space:nowrap;
}
.disband--low{background:var(--dis-low)}
.disband--moderate{background:var(--dis-moderate)}
.disband--high{background:var(--dis-high)}
.disband--critical{background:var(--dis-critical)}

/* =============================================================================
   The review screen
   ========================================================================== */
.disstats{
  display:grid; gap:10px; margin:14px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.disstat{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px 16px;
}
.disstat b{display:block; font-size:23px; line-height:1.1; color:var(--ink); letter-spacing:-.01em}
.disstat span{display:block; margin-top:4px; font-size:12px; color:var(--ink-3)}

/* One stacked bar rather than four tiles: the question is a proportion — what
   share of inspections are in trouble — and four numbers side by side make the
   reader do that division themselves. */
.disrisk{
  margin:14px 0 0; padding:16px 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.disrisk__h{margin:0 0 10px; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.disrisk__bar{
  display:flex; height:14px; border-radius:999px; overflow:hidden; background:var(--surface-2);
}
/* A 2px surface gap between segments, so two adjacent bands never read as one
   longer block of a single colour. */
.disrisk__seg + .disrisk__seg{box-shadow:-2px 0 0 var(--surface)}
.disrisk__seg--low{background:var(--dis-low)}
.disrisk__seg--moderate{background:var(--dis-moderate)}
.disrisk__seg--high{background:var(--dis-high)}
.disrisk__seg--critical{background:var(--dis-critical)}

.disrisk__key{
  display:flex; flex-wrap:wrap; gap:16px; margin:12px 0 0; padding:0; list-style:none;
  font-size:12.5px; color:var(--ink-2);
}
.disrisk__key li{display:flex; align-items:center; gap:6px}
.disrisk__key strong{color:var(--ink)}
.disrisk__dot{width:10px; height:10px; border-radius:3px; flex:none}
.disrisk__dot--low{background:var(--dis-low)}
.disrisk__dot--moderate{background:var(--dis-moderate)}
.disrisk__dot--high{background:var(--dis-high)}
.disrisk__dot--critical{background:var(--dis-critical)}

.disfilter{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; margin-top:14px;
}
.disfilter__row{display:flex; flex-wrap:wrap; gap:12px}
.disfilter__row label{display:flex; flex-direction:column; gap:5px; font-size:12px;
  font-weight:600; color:var(--ink-2)}
.disfilter__row input,
.disfilter__row select{
  padding:7px 10px; font-size:13.5px; font-family:inherit;
  border:1px solid var(--line); border-radius:5px; background:var(--surface); color:var(--ink);
}
.disfilter__do{display:flex; gap:9px; margin:14px 0 0; flex-wrap:wrap}

.disreg{font-size:13px}
.disreg code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px; background:var(--surface-2); padding:2px 6px; border-radius:3px;
  color:var(--wine-dark);
}
.dis-sub{font-size:11.5px; color:var(--ink-3)}

/* An entry changed by somebody other than its author says so on its face. An
   editable record with no mark of the edit is not a record. */
.disedited{
  display:inline-block; margin-left:5px; padding:1px 6px; border-radius:3px;
  background:var(--wine-tint); color:var(--wine); font-size:10px;
  font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}

.disthumbs{display:inline-flex; gap:4px; align-items:center}
.disthumbs img{
  width:38px; height:28px; object-fit:cover; border-radius:3px;
  border:1px solid var(--line); display:block;
}
.disthumbs__more{font-size:11px; color:var(--ink-3)}

@media (max-width:640px){
  .dis-form{padding:14px}
  .dis-grid{grid-template-columns:1fr}
  .dis-actions{flex-direction:column}
  .disverdict{gap:14px; padding:16px}
  .disverdict__n b{font-size:32px}
  .disfilter__row label{flex:1 1 100%}
}

/* The honeypot: out of the viewport, never display:none — some bots skip
   anything that is display:none, and a real visitor never reaches it. */
.dis-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.dis-fs--you{border-color:var(--line-wine); background:var(--wine-tint)}

.dispublic{display:inline-block; padding:1px 6px; border-radius:3px; background:var(--wine); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}