/* css/pages/fungiflex-panel.css
   ------------------------------------------------------------
   Shared styles for the individual FungiFlex test detail pages
   (Mold Panel, Pneumocystis, Mold+). The hero, section heads,
   badges, and the dark ordering panel (.order-panel / .download-row
   / .order-note) all come from components/ — this file only adds the
   pieces unique to a test page: the organism table, intended-use /
   clinical-utility info blocks, the reference list, the dark-panel
   download buttons, and the "coming soon" placeholder.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Test spec cards — the at-a-glance facts (CPT code, targets,
   turnaround, sample type) shown as a card row directly beneath the
   hero. Sits tight under the hero rather than a full section gap.
   ------------------------------------------------------------ */
/* The plate mounts onto the base of the hero: a single connected white
   surface pulled up over the hero's bottom padding, so the key facts
   read as a spec plate fixed to the title rather than four cards
   floating in a gap. One blue top rule ties the cells together. */
.spec-section {
  padding-top: 0;
  padding-bottom: 0;
}
.spec-cards {
  position: relative;
  /* The plate is pulled up over the hero's bottom padding (negative
     margin below). The hero's own .wrap sits at z-index:2, so without
     a higher index here the hero would paint over the plate's top
     edge — lift the plate above it. */
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: -72px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: 10px;
  box-shadow: 0 22px 48px -30px rgba(32, 38, 94, 0.45);
}
.spec-card {
  padding: 24px 26px;
}
/* Hairline between cells only — no outer rule (the plate owns that). */
.spec-card + .spec-card {
  border-left: 1px solid var(--line);
}
.spec-card-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.spec-card-value {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 27px;
  line-height: 1.1;
  color: var(--blue);
}
/* Small qualifier under a value — e.g. "after sample receipt" beneath
   the turnaround figure — so long specs keep the big-number rhythm
   instead of wrapping the headline value across lines. */
.spec-card-note {
  margin-top: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

@media (max-width: 720px) {
  .spec-cards {
    grid-template-columns: 1fr 1fr;
    margin-top: -48px;
  }
  /* On a 2×2 grid the "+ .spec-card" left border misfires on the
     first cell of each row — redraw as a grid of hairlines instead. */
  .spec-card { border-left: 1px solid var(--line); }
  .spec-card:nth-child(odd) { border-left: none; }
  .spec-card:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 420px) {
  .spec-cards { grid-template-columns: 1fr; }
  .spec-card, .spec-card:nth-child(odd) { border-left: none; }
  .spec-card + .spec-card { border-top: 1px solid var(--line); }
}

/* ------------------------------------------------------------
   Organism table — reported result + detection level.
   ------------------------------------------------------------ */
.organism-table {
  display: flex;
  flex-direction: column;
  gap: 1px;                 /* hairline gaps show the --line ground between rows */
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.organism-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.45fr);
  gap: 24px;
  align-items: center;
  padding: 16px 20px;
  background: var(--white);
  transition: background 0.14s ease;
}
/* Row hover — a faint tint so a clinician can track across the two
   columns without a hard zebra pattern. Not on the header row. */
.organism-table-row:not(.head):hover {
  background: var(--blue-tint);
}
.organism-table-row.head {
  background: var(--blue-tint);
  align-items: center;
}
/* First column: italic organism name stacked over its detection-level
   pill, so the "how precisely is this reported" fact rides with every
   result instead of living in a legend somewhere else. */
.ocol-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.organism-table-row .oname {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  color: var(--blue-deep);
}
/* Detection-level pill. Species-level (Aspergillus) reads in brand
   blue; group-level picks up the teal accent, so the two report
   depths are separable at a glance. */
.olevel {
  padding: 3px 9px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--blue);
  background: var(--blue-tint);
}
.olevel.group {
  color: var(--teal);
  background: var(--teal-tint);
}
/* Upright, muted qualifier inside an italic organism name — e.g. the
   "(group)" that follows a genus reported at group level. */
.organism-table-row .oname .lvl {
  font-style: normal;
  color: var(--muted);
}
/* Upright run inside an otherwise-italic name — for the "spp."
   abbreviation, which by convention is not italicised. Keeps the
   surrounding colour. */
.organism-table-row .roman {
  font-style: normal;
}
/* Second column — the specific targets rolled up under each reported
   result. Italic scientific names, wrapping across as many lines as the
   list needs. */
.organism-table-row .otargets {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.organism-table-row .ohead {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Detection-level tag. Species-level reads in brand blue; group-level
   picks up the teal accent so the two are distinguishable at a glance. */
.organism-table-row .otag {
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--blue);
  background: var(--blue-tint);
}
.organism-table-row .otag.group {
  color: var(--teal);
  background: var(--teal-tint);
}

/* ------------------------------------------------------------
   Info blocks — Intended use / Clinical utility.
   ------------------------------------------------------------ */
.info-block {
  padding: 32px;
  margin-bottom: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.info-block .eyebrow {
  margin-bottom: 12px;
}
.info-block p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}
.info-block p + p {
  margin-top: 14px;
}
/* Intended-use quotation reads lighter and italic. */
.info-block.quote p {
  font-style: italic;
  color: var(--muted);
}
.info-note {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ------------------------------------------------------------
   Specimen instructions — one connected panel split in two: the
   collection requirements on the left, the stability table on the
   right, divided by a single hairline so they read as one datasheet.
   ------------------------------------------------------------ */
.sample-layout {
  display: grid;
  /* Left (requirements) 40%, right (stability) 60%. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: stretch;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.sample-reqs {
  display: flex;
  flex-direction: column;
  padding: 30px 32px 34px;
  /* align-items: center; */
}
/* Hairline between the two columns; the right (stability) column takes
   the page's pale ground so only the left requirements column reads as
   a white panel. */
.sample-reqs + .sample-reqs {
  border-left: 1px solid var(--line);
  background: var(--blue-tint);
}
.sample-reqs-title {
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.sample-req {
  padding: 20px 0;
}
.sample-req + .sample-req {
  border-top: 1px solid var(--line);
}
.sample-req:last-child {
  padding-bottom: 0;
}
.sample-req-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.sample-req-value {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--blue);
}
/* "OR" separator inside a value reads as a quiet conjunction, not a
   second headline. */
.sample-req-value strong {
  font-weight: 600;
  color: var(--muted);
}
/* Two-alternative volume cell (e.g. ">2-3 mL Plasma OR >4-6 mL Whole
   Blood"). Stacks the options so each mL amount keeps its own line and
   the bright value colour, while the specimen type and the "or" divider
   read quieter. Single-value cells keep the default one-line look. */
.sample-req-value.stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 18px;
}
.sample-req-value.stacked .req-type {
  color: var(--muted);
}
.sample-req-value.stacked .req-or {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Preferred-specimen choices — each a specimen name over the condition
   that selects it, compact instead of two oversized values. */
.spec-choice {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.spec-choice li {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.spec-choice-name {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 15px;
  color: var(--blue);
}
.spec-choice-cond {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* Stability table — sample type / temperature / stability. A white,
   rounded table with a solid-blue header, sitting on the tinted
   column, all text centered. Border-radius only works on a table when
   the borders aren't collapsed, so this uses border-collapse: separate
   plus overflow: hidden — that lets the corner cells clip to the
   table's radius (a collapsed table ignores border-radius entirely,
   which is why the corners weren't rounding). */
.stability-table {
  width: 100%;
  margin-top: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  text-align: center;
  background-color: var(--white);
  border-radius: 10px;
  color: var(--blue-deep);
  /* Soft blue lift off the tinted column. Sized to sit within the
     column padding so the card's overflow:hidden doesn't clip it. */
  box-shadow: 0 14px 30px -16px rgba(32, 38, 94, 0.45);
}
.stability-table th {
  padding: 15px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: var(--blue);
  color: white;
}
.stability-table td {
  padding: 16px 18px;
  font-size: 13.5px;
  vertical-align: middle;
  /* Hairline between rows so the three specimens read as distinct
     lines; faint blue-grey so it shows on the white cells and reads
     as a soft seam on the coloured ones. */
  border-bottom: 1px solid rgba(32, 38, 94, 0.09);
}
.stability-table tr:last-child td {
  border-bottom: none;
}
/* First column names the specimen — give it a touch more weight. */
.stability-table td:first-child {
  font-weight: 600;
  color: var(--blue-deep);
}
/* Data cells read a step quieter than the bold specimen labels. */
.stability-table td:not(:first-child) {
  color: var(--ink);
}

.stability-table tr:first-child td:first-child{
  background-color: var(--pink);
}

.stability-table tr:nth-child(2) td:first-child{
  background-color: var(--yellow);
}

.stability-table tr:nth-child(3) td:first-child{
  background-color: var(--yellow);
}

/* ------------------------------------------------------------
   Storage & shipping — handling rules under the stability table in the
   right column. A single-column marked list; the critical freeze/ship
   rule is accented with the table's frozen-yellow so the one
   do-or-lose-the-sample step can't be missed.
   ------------------------------------------------------------ */
/* White panel so the storage rules read as a card on the tinted
   column, matching the stability table above it. */
.storage-panel {
  margin-top: 20px;
  padding: 24px 26px 26px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 12px 26px -16px rgba(32, 38, 94, 0.4);
}
.storage-head {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.storage-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.storage-item {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.storage-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.storage-item p strong {
  font-weight: 600;
  color: var(--ink);
}
/* Marker — a small brand-blue square echoing the table header. */
.storage-marker {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 2px;
  background: var(--blue);
}
/* The critical freeze/ship rule takes the table's frozen-yellow chip
   colour plus a halo, tying it to the palette and flagging it as the
   step that saves the sample. */
.storage-item.is-key .storage-marker {
  background: var(--yellow);
  box-shadow: 0 0 0 3px rgba(248, 219, 144, 0.4);
}
.storage-item.is-key p strong {
  color: var(--blue-deep);
}

/* Caution note under the panel — freeze/ship guidance. It sits on the
   pale page ground (not the dark order panel), so it needs its own
   readable treatment rather than .order-note's light-on-dark colour. */
.specimen-note {
  display: flex;
  gap: 11px;
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--blue-tint);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--blue-deep);
}
.specimen-note svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--blue);
}
.specimen-note strong {
  font-weight: 600;
}

@media (max-width: 760px) {
  /* minmax(0, 1fr) — not plain 1fr — so the stacked column can't grow
     past the container to fit the stability table's min-content and
     then get clipped by .sample-layout's overflow:hidden. */
  .sample-layout { grid-template-columns: minmax(0, 1fr); }
  .sample-reqs + .sample-reqs {
    border-left: none;
    border-top: 1px solid var(--line);
  }
}
/* Narrow phones: the stability table's nowrap headers and the big mono
   spec values otherwise push the column wider than the screen (clipped
   by the panel's overflow:hidden). Tighten the padding, let the table
   headers wrap, and step the values down so the datasheet fits. */
@media (max-width: 480px) {
  .sample-reqs { padding: 24px 18px 26px; }
  .stability-table { margin-top: 12px; }
  .stability-table th,
  .stability-table td { padding: 11px 9px; }
  .stability-table th { white-space: normal; }
  .sample-req-value { font-size: 18px; }
  .sample-req-value.stacked { font-size: 16px; }
  .storage-panel { padding: 22px 18px 24px; }
}

/* ------------------------------------------------------------
   Clinical utility — set as editorial prose, not a boxed card:
   the takeaway lifted out as a lead beside the supporting detail,
   with a brand rule anchoring it. Breaks the page's card rhythm.
   ------------------------------------------------------------ */
.utility {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 44px;
  align-items: start;
  padding-left: 26px;
  border-left: 3px solid var(--blue);
}
.utility-lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.45;
  color: var(--blue-deep);
}
.utility-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
}
@media (max-width: 760px) {
  .utility {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-left: 18px;
  }
  .utility-lead { font-size: 19px; }
}

/* ------------------------------------------------------------
   Reference list — numbered, with citation links.
   ------------------------------------------------------------ */
.ref-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ref-item {
  display: flex;
  gap: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
.ref-item .ref-num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  color: var(--muted);
}
.ref-item a {
  color: var(--blue);
  border-bottom: 1px solid var(--line);
}
.ref-item a:hover {
  color: var(--teal);
  border-color: var(--teal);
}

/* ------------------------------------------------------------
   Ordering — download buttons + CLIA link on the dark .order-panel.
   The panel itself, .download-row, and .order-note come from
   components/cta.css.
   ------------------------------------------------------------ */
.download-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: background 0.15s ease;
}
.download-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.download-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.clia-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-bottom: 2px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--on-dark-soft);
  border-bottom: 1px dotted rgba(138, 144, 184, 0.5);
}
.clia-badge:hover {
  color: var(--white);
}

/* ------------------------------------------------------------
   Coming-soon placeholder — used where a test's intended use and
   references aren't published yet.
   ------------------------------------------------------------ */
.soon-panel {
  padding: 44px;
  text-align: center;
  background: var(--white);
  border: 1px dashed var(--amber);
  border-radius: 6px;
  --eyebrow-color: var(--amber);   /* recolors the eyebrow + its dash — see layout.css */
}
.soon-panel p {
  max-width: 480px;
  margin: 12px auto 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
}