/* No Brainer Water Co. - district water-quality pages (water/*.html).
   The report's page-1 visual language (assessment/report_theme.py) in web
   form: official-source stamp, restrained stat row, sectioned results
   table with share-of-limit bars. Product cards come from page-shop.css -
   district pages link BOTH stylesheets; this file adds only what the
   report look needs on the web. */

/* official-source stamp - the report's .stamp, sitting on the dark hero */
.stamp {
  margin-top: 2.2rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-card);
  background: rgb(255 255 255 / 0.05);
  display: grid; grid-template-columns: 96px 1fr; gap: 1.4rem;
  padding: 1.2rem 1.4rem;
  align-items: center;
  max-width: 640px;
}
.stamp__logo {
  background: #fff; border-radius: 12px; padding: 0.6rem;
  display: flex; align-items: center; justify-content: center;
}
.stamp__logo img { max-height: 64px; width: auto; }
.stamp__t1 {
  font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: rgb(var(--accent)); font-weight: var(--w-medium);
}
.stamp__t2 { font-size: var(--text-sm); font-weight: var(--w-medium); margin-top: 0.3rem; line-height: 1.5; }
.stamp__t3 { font-size: var(--text-xs); opacity: 0.65; margin-top: 0.3rem; line-height: 1.5; }
@media (max-width: 560px) {
  .stamp { grid-template-columns: 1fr; }
  .stamp__logo { width: 96px; }
}

/* stat row - the report's restrained three numbers, none of them shouting */
.stat-row { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 2.4rem; }
@media (min-width: 700px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
.stat { border-top: 1.5px solid rgb(var(--ink)); padding-top: 0.9rem; }
.stat__n { font-size: 2.6rem; font-weight: var(--w-medium); letter-spacing: -0.02em; line-height: 1.05; }
.stat__n small { font-size: 1rem; opacity: 0.55; font-weight: var(--w-regular); margin-left: 0.25rem; }
.stat__l {
  font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0.6; margin-top: 0.35rem; font-weight: var(--w-medium);
}
.stat__d { font-size: var(--text-sm); opacity: 0.78; margin-top: 0.5rem; line-height: 1.55; }

/* results table - the report's sectioned table with share-of-limit bars */
.wq-wrap {
  overflow-x: auto;
  background: #fff;
  border-radius: var(--radius-card);
  border: 1px solid rgb(var(--ink) / 0.1);
  margin-top: 2rem;
}
.wq {
  width: 100%; min-width: 700px;
  border-collapse: separate; border-spacing: 0;
  font-size: var(--text-sm); line-height: 1.45;
}
.wq th {
  font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: rgb(var(--ink));
  padding: 0.8rem 1.1rem; text-align: left; font-weight: var(--w-medium);
}
.wq th.n, .wq td.n { text-align: right; }
.wq td { padding: 0.75rem 1.1rem; border-bottom: 1px solid rgb(var(--ink) / 0.08); vertical-align: top; }
.wq tr:last-child td { border-bottom: 0; }
.wq .secrow td {
  background: rgb(var(--paper-dim)); color: rgb(var(--chip-blue));
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: var(--w-medium); padding: 0.5rem 1.1rem;
}
.wq .nm { font-weight: var(--w-medium); }
.wq-note { display: block; font-size: var(--text-xs); opacity: 0.55; font-weight: var(--w-regular); margin-top: 0.15rem; }
.wq-bar { position: relative; height: 4px; background: rgb(var(--ink) / 0.08); border-radius: 2px; margin-top: 0.45rem; min-width: 84px; }
.wq-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: rgb(var(--chip-blue)); }
.wq .nolim { opacity: 0.45; }
.wq-source { font-size: var(--text-xs); opacity: 0.55; margin-top: 1rem; max-width: 64ch; }

/* what this means for your house - the report's bordered-heading blocks */
.means-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 900px) { .means-grid { grid-template-columns: repeat(3, 1fr); } }
.means h3 { font-size: 1.1rem; border-top: 1.5px solid rgb(var(--ink)); padding-top: 0.9rem; margin-bottom: 0.6rem; }
.means p { font-size: var(--text-sm); opacity: 0.82; margin: 0; line-height: 1.6; }

/* two product cards, not three - keeps the pair from stretching full width */
.shelf-grid--pair { max-width: 860px; }
@media (min-width: 1100px) { .shelf-grid--pair { grid-template-columns: 1fr 1fr; } }