/* pages.css — additions for for-dispensaries.html, lab-results.html and where-to-buy.html.
   Loads after styles.css and uses only its tokens. Nothing here changes a shared class. */

/* ---------- inner page head (the adults line is the .brand-notice band above it, from styles.css) ---------- */
.page-head .h-hero { max-width: 14em; }
.rep-email { color: var(--muted); }

/* ---------- for dispensaries: the licence-gated form ---------- */
/* The gate runs in JavaScript. With scripts off the form is hidden and the <noscript> email route shows,
   so a licence number can never leave the page unchecked. html.js is set by an inline line at the top of <main>. */
html:not(.js) .js-only { display: none; }
.rep-card { padding: 28px 24px; }
.rep-card .form { gap: 20px; }
.rep-card .form .btn { justify-self: start; }
.rep-card [data-form-message]:empty { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* keeps the aria-live region rendered, so the first OK/fail line is announced */
.rep-noscript { color: var(--ink); }
.rep-aside .points { margin-top: 8px; }
@media (min-width: 768px) {
  .rep-card { padding: 36px; }
}
.below { display: grid; gap: 16px; }
.below .card { display: flex; flex-direction: column; gap: 12px; }
.below .card p { color: var(--muted); }
.below .card .btn { margin-top: auto; align-self: flex-start; }
.below .card p + .btn { margin-top: 12px; }
@media (min-width: 900px) {
  .below { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
}

/* ---------- lab results: the one table ---------- */
.lab-table-section { padding-top: 40px; }   /* one rhythm below the lede, not the page-head padding stacked on the section's */
.coa-table th:nth-child(1) { width: 18%; }
.coa-table th:nth-child(2) { width: 42%; }
.coa-table td.coa-brand { font-weight: 600; white-space: nowrap; }
.coa-table td.coa-lab { white-space: nowrap; }
.coa-table .coa-product { display: block; font-weight: 600; }
.coa-table .coa-meta { display: block; margin-top: 4px; color: var(--muted); font-size: 16px; line-height: 1.5; max-width: 30em; }
.coa-table time { white-space: nowrap; }
.coa-table a { font-weight: 600; white-space: nowrap; }
.coa-table tr.is-pending td { color: var(--muted); }
.coa-table tr.is-pending .coa-brand { color: var(--ink); }
.lab-note { margin-top: 24px; color: var(--muted); max-width: 40em; }
/* under 700px the five columns stack into one card per row, each cell labelled */
@media (max-width: 699px) {
  .coa-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .coa-table tbody tr { display: block; padding: 14px 16px 16px; border-bottom: 1px solid var(--line); }
  .coa-table tbody tr:nth-child(even) { background: var(--paper-2); }
  .coa-table tbody tr:last-child { border-bottom: 0; }
  .coa-table tbody td { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 5px 0; border: 0; background: transparent !important; }
  .coa-table tbody td::before { content: attr(data-label); font-weight: 600; color: var(--muted); font-size: 16px; }
  .coa-table td.coa-brand { white-space: normal; }
  .coa-table tbody td .coa-meta { grid-column: 1 / -1; margin-top: 2px; }
}

/* ---------- where to buy: 77 stores grouped by city (same search pill as the home page) ---------- */
.stores-section .store-search { margin-top: 0; }
.store-count { margin-top: 16px; color: var(--muted); }
.city-groups { margin-top: 32px; display: grid; gap: 40px; }
.city-group[hidden] { display: none; }
.city-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.city-head .count { color: var(--muted); font-family: var(--sans); font-weight: 500; font-size: 16px; letter-spacing: 0; }
.city-group .store-list { margin-top: 16px; grid-template-columns: 1fr; }
/* from 760 up the city groups flow into columns, so a one-store city does not leave two thirds of a row empty */
@media (min-width: 760px) {
  .city-groups { display: block; columns: 2; column-gap: var(--gutter); }
  .city-group { break-inside: avoid; margin-bottom: 40px; }
}
@media (min-width: 1100px) { .city-groups { columns: 3; } }
.store[hidden] { display: none; }
.store-empty[hidden] { display: none; }
.store-note + .store-note { margin-top: 12px; }