/* LabLife — Universal constants page (#constants): search box and the tables of constants. */
.const-search { padding-bottom: 14px; }
.const-filter {
  width: 100%; min-width: 0; height: 50px; padding: 0 18px;
  font: inherit; font-size: 16px;                   /* 16px: phones don't zoom into the field */
  background: var(--well); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 999px;
  -webkit-appearance: none; appearance: none;
}
.const-filter:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 18px var(--glow); }
.const-filter::placeholder { color: var(--ink-2); opacity: 0.8; }

.const-groups { display: grid; gap: 14px; }
.const-note { font-size: 13px; color: var(--ink-2); padding: 4px 16px 4px; max-width: 75ch; }
.const-list { list-style: none; margin: 0; padding: 0 0 4px; }
.const {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "sym name tag" "val val val";
  column-gap: 10px; row-gap: 2px; align-items: baseline; padding: 10px 16px;
}
.const + .const { border-top: 1px solid var(--line); }
.const-sym { grid-area: sym; color: var(--accent); }
.const-name { grid-area: name; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.35; }
.const-tag { grid-area: tag; justify-self: end; font-size: 12px; color: var(--ink-2); white-space: nowrap; font-family: var(--font-num); }
.const-tag.exact { font-family: var(--font-ui); font-weight: 500; color: var(--ok); background: var(--ok-soft); border-radius: 999px; padding: 1px 8px; }
.const-tag sup { font-size: 0.75em; line-height: 0; }
.const-val {
  grid-area: val; justify-self: start; text-align: left; padding: 3px 0;
  font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere;
}
.const-val:hover .const-num { color: var(--accent); }
.const-num .dg + .dg { margin-left: 0.32em; }
.const-num .unc, .const-num .more { color: var(--ink-2); }
.const-unit { font-family: var(--font-ui); font-size: 15px; font-weight: 400; color: var(--ink-2); }
.const-source { font-size: 13px; color: var(--ink-2); padding: 14px 2px 40px; max-width: 75ch; }
.const-groups + .empty-note { padding-top: 4px; }