/* Protocol Her query page styles (calculator hubs, worked vial cases, and
   the two alternatives pages). app.css is Tailwind compiled from the marketing
   pages only, so every class specific to these pages lives here as plain CSS
   (no build step). Palette and rhythm mirror guide.css and compare.css. */

/* ------------------------------------------------------ Worked examples */

.qp-examples {
  display: grid;
  gap: 12px;
}
@media (min-width: 640px) {
  .qp-examples {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.qp-example {
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(242, 196, 206, 0.1);
}
.qp-example-head {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E8A0B4;
  margin-bottom: 8px;
}
.qp-example-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}
.qp-example-body strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

/* -------------------------------------------------------------- Tables */
/* Wide tables scroll inside their own container so the page body never
   scrolls sideways on a phone. */

.qp-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  border: 1px solid rgba(242, 196, 206, 0.12);
  background: rgba(255, 255, 255, 0.02);
}
.qp-table {
  width: 100%;
  min-width: 560px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  line-height: 1.5;
}
.qp-table th,
.qp-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(242, 196, 206, 0.1);
}
.qp-table thead th {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: #E8A0B4;
  white-space: nowrap;
  background: rgba(242, 196, 206, 0.04);
}
.qp-table tbody th[scope="row"] {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  white-space: nowrap;
}
.qp-table tbody td {
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.qp-table tbody td strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}
.qp-table tbody tr:last-child th,
.qp-table tbody tr:last-child td {
  border-bottom: none;
}
.qp-table tbody tr:hover td,
.qp-table tbody tr:hover th[scope="row"] {
  background: rgba(242, 196, 206, 0.03);
}
.qp-na {
  color: rgba(255, 255, 255, 0.28) !important;
  font-style: italic;
}
/* Prose cells (barrel notes, competitor facts) wrap instead of running wide. */
.qp-wide {
  white-space: normal !important;
  min-width: 220px;
}
.qp-sub {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.38);
}

/* ---------------------------------------------------------------- FAQ */

.qp-faq {
  padding: 18px 0;
  border-bottom: 1px solid rgba(242, 196, 206, 0.1);
}
.qp-faq:last-of-type {
  border-bottom: none;
}

/* -------------------------------------------------------------- Gauge */
/* The syringe is drawn server-side at a fixed fill, so unlike the interactive
   calculator it never transitions. No transition property is set here. */

.qp-gauge-figure {
  margin: 0;
}
.qp-gauge-figure .calc-gauge {
  width: 100%;
  height: auto;
}

/* ------------------------------------------- Utilities app.css lacks */
/* app.css is Tailwind compiled from the marketing pages only, so a utility
   these pages are the first to use simply is not in it. Verified missing by
   comparing computed styles against a page that already ships: `text-2xl`
   and `sm:text-3xl` were resolving to the 16px browser default. Each rule
   below reproduces Tailwind's own value for that class. */

.mt-6 { margin-top: 1.5rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media (min-width: 640px) {
  .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
  .sm\:p-8 { padding: 2rem; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}