/* ==========================================================================
   Athena Peptides Education — data tables and dosage charts
   ==========================================================================

   One treatment for every table on the site. The pages carry four different
   table classes (.contra-table, .ctable, .blend-table, .titration-table) plus
   bare <table> rules, written at different times with two different looks —
   one already light, the rest dark. They are normalised here.

   Two problems this fixes beyond colour:

   1. Long prose in narrow columns. The KLOW component table puts a sentence
      of mechanism text in a quarter-width column, which on a laptop is four
      or five words per line. Columns now size to their content rather than
      splitting the width evenly.

   2. Horizontal squeeze on phones. Below 700px every table stops being a grid
      and becomes a stack of cards — one card per row, each cell on its own
      line with its column heading beside it. The headings come from
      `data-label` attributes written onto the cells by tools/build-tables.mjs,
      so the visible column heading and the stacked label can never drift
      apart. Any table whose cells lack the attribute simply scrolls
      horizontally instead, which is the safe fallback.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared table treatment
   -------------------------------------------------------------------------- */
.apx-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0;
}

/* A table already carries its own top and bottom margin; doubling it inside
   the scroll box leaves a gap that reads as a missing element. */
.apx-table-scroll > table {
  margin: 0;
}

table,
.contra-table,
.ctable,
.blend-table,
.titration-table,
.apx-dose-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--apx-line, #D9E4F0);
  font-size: .82rem;
  line-height: 1.55;
}

table th,
.contra-table th,
.ctable th,
.blend-table th,
.titration-table th,
.apx-dose-table th {
  background: #0C1927;
  color: #EEF2F7;
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .8rem 1rem;
  text-align: left;
  vertical-align: bottom;
  border-bottom: 2px solid var(--apx-brand-teal, #2CB5D6);
  white-space: nowrap;
}

table td,
.contra-table td,
.ctable td,
.blend-table td,
.titration-table td,
.apx-dose-table td {
  padding: .8rem 1rem;
  color: var(--apx-ink, #12263F);
  background: transparent;
  border-bottom: 1px solid var(--apx-line, #D9E4F0);
  vertical-align: top;
}

table tbody tr:last-child td,
.apx-dose-table tbody tr:last-child td {
  border-bottom: none;
}

/* Alternating shading. Kept very light so the dividers still do the work. */
table tbody tr:nth-child(even) td,
.contra-table tbody tr:nth-child(even) td,
.ctable tbody tr:nth-child(even) td,
.blend-table tbody tr:nth-child(even) td,
.titration-table tbody tr:nth-child(even) td,
.apx-dose-table tbody tr:nth-child(even) td {
  background: #F5F9FD;
}

table tbody tr:hover td,
.contra-table tbody tr:hover td,
.ctable tbody tr:hover td,
.blend-table tbody tr:hover td,
.titration-table tbody tr:hover td,
.apx-dose-table tbody tr:hover td {
  background: rgba(15, 116, 144, .07);
}

table td strong,
.apx-dose-table td strong {
  color: var(--apx-ink, #12263F);
  font-weight: 600;
}

/* The first column is the row's subject on every table here, so it carries
   the weight and never wraps mid-term if it can be helped. */
table tbody td:first-child,
.contra-table tbody td:first-child,
.blend-table tbody td:first-child,
.titration-table tbody td:first-child,
.apx-dose-table tbody td:first-child {
  font-weight: 600;
  color: var(--apx-ink, #12263F);
}

/* Numeric columns read better in the mono face, aligned as a block. */
.apx-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: .95em;
  white-space: nowrap;
}

/* The dose tables have six headings, several of them three or four words. Held
   on one line they alone set a minimum table width wider than the text column,
   so they wrap; two short lines of heading costs nothing and buys the numbers
   room. Same reasoning for the annotation under a syringe figure — the number
   itself must not break, but a sentence about it can. */
.apx-dose-table th {
  white-space: normal;
}

.apx-num .apx-dose-src {
  white-space: normal;
}

/* Fragments that must not break across lines even where their container wraps
   freely — "(U-100)" and "100-unit" read as two separate numbers if they do. */
.apx-nowrap {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2. Column sizing
   Even quarter-width columns are what squeezed the prose. Letting the table
   size columns to content, with a floor on the narrow ones, gives the long
   column the room it actually needs.
   -------------------------------------------------------------------------- */
.blend-table,
.contra-table,
.titration-table {
  table-layout: auto;
}

.blend-table td:nth-child(2),
.titration-table td:nth-child(1),
.titration-table td:nth-child(2) {
  white-space: nowrap;
}

.blend-table td:last-child,
.contra-table td:last-child {
  min-width: 16rem;
}

/* --------------------------------------------------------------------------
   3. Phone layout — one card per row
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  table:has(td[data-label]),
  .apx-dose-table:has(td[data-label]) {
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }

  table:has(td[data-label]) thead,
  .apx-dose-table:has(td[data-label]) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  table:has(td[data-label]) tbody tr,
  .apx-dose-table:has(td[data-label]) tbody tr {
    display: block;
    background: #FFFFFF;
    border: 1px solid var(--apx-line, #D9E4F0);
    border-left: 3px solid var(--apx-teal-ink, #0F7490);
    border-radius: 10px;
    margin-bottom: .75rem;
    padding: .25rem .25rem .35rem;
    box-shadow: 0 1px 3px rgba(18, 38, 63, .06);
  }

  table:has(td[data-label]) tbody tr:nth-child(even) td,
  table:has(td[data-label]) tbody tr:hover td,
  .apx-dose-table:has(td[data-label]) tbody tr:nth-child(even) td,
  .apx-dose-table:has(td[data-label]) tbody tr:hover td {
    background: transparent;
  }

  table:has(td[data-label]) tbody td,
  .apx-dose-table:has(td[data-label]) tbody td {
    display: block;
    width: auto;
    min-width: 0;
    white-space: normal;
    padding: .5rem .85rem;
    border-bottom: 1px solid #EDF2F8;
  }

  table:has(td[data-label]) tbody td:last-child,
  .apx-dose-table:has(td[data-label]) tbody td:last-child {
    border-bottom: none;
  }

  /* The column heading, repeated above each value. */
  table:has(td[data-label]) tbody td[data-label]::before,
  .apx-dose-table:has(td[data-label]) tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--apx-teal-ink, #0F7490);
    margin-bottom: .2rem;
  }

  /* The row subject leads the card, so it does not need its own label. */
  table:has(td[data-label]) tbody td:first-child,
  .apx-dose-table:has(td[data-label]) tbody td:first-child {
    font-size: .95rem;
    padding-top: .65rem;
  }

  /* Anything the builder could not label keeps the grid and scrolls. */
  table:not(:has(td[data-label])) {
    display: block;
    overflow-x: auto;
  }
}

/* --------------------------------------------------------------------------
   4. Dosage & reconstitution block
   Sits directly under the compound summary on every profile page. Written by
   tools/build-dosing.mjs from data/dosing-data.json.
   -------------------------------------------------------------------------- */
.apx-dose {
  margin: 2rem 0 2.5rem;
}

/* The pages hold their body copy in a 900px column, which is the right measure
   for prose and too narrow for a wide data table — the KLOW component table
   puts a compound name and two clauses of mechanism text into four columns and
   wraps every one of them to three or four lines. On a wide viewport the data
   tables alone break out of that column and centre themselves against the
   window; the surrounding paragraphs keep their measure. The container is
   centred, so offsetting by half the difference re-centres the wider box.
   Below this width nothing moves, and on a phone the cards take over. */
@media (min-width: 1180px) {
  .apx-dose .apx-vials,
  .apx-dose .apx-vial-panel,
  .content-section > table,
  .intro-section > table {
    --apx-wide: min(1160px, calc(100vw - 5rem));
    width: var(--apx-wide);
    margin-left: calc(50% - var(--apx-wide) / 2);
  }
}

.apx-dose-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .35rem;
}

.apx-dose h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  color: var(--apx-ink, #12263F);
}

.apx-dose-sub {
  font-size: .82rem;
  line-height: 1.65;
  color: var(--apx-ink-2, #40566F);
  margin: 0 0 1.1rem;
  max-width: 62ch;
}

/* --- evidence tier chip ------------------------------------------------
   Every dosing figure on the site is tagged with where it comes from. The
   three tiers are deliberately different colours so the distinction survives
   skim-reading, and the wording is spelled out in the legend below. */
.apx-tier {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .28rem .6rem;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}

.apx-tier::before {
  content: '';
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: currentColor;
}

.apx-tier-human {
  color: #15754A;
  border-color: rgba(21, 117, 74, .35);
  background: rgba(21, 117, 74, .08);
}

/* The amber sits on an 8% tint of itself, on top of a zebra row that is already
   off-white, so it has the least headroom of the three and needs the darkest
   value to clear AA. #A66B00 measured 3.81:1 in that stack. */
.apx-tier-animal {
  color: #945F00;
  border-color: rgba(148, 95, 0, .35);
  background: rgba(148, 95, 0, .08);
}

.apx-tier-protocol {
  color: #0F7490;
  border-color: rgba(15, 116, 144, .35);
  background: rgba(15, 116, 144, .08);
}

/* --- vial-strength selector -------------------------------------------
   Shown only when a compound is supplied in more than one strength. Without
   JavaScript every table stays visible and simply stacks, which is why the
   tables are individually captioned rather than relying on the buttons. */
.apx-vials {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .9rem;
}

.apx-vial-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .06em;
  padding: .42rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--apx-line-2, #C3D4E5);
  background: #FFFFFF;
  color: var(--apx-ink-2, #40566F);
  cursor: pointer;
  transition: all .2s;
}

.apx-vial-btn:hover {
  border-color: var(--apx-teal-ink, #0F7490);
  color: var(--apx-teal-ink, #0F7490);
}

.apx-vial-btn[aria-selected="true"] {
  background: var(--apx-teal-ink, #0F7490);
  border-color: var(--apx-teal-ink, #0F7490);
  color: #FFFFFF;
}

.apx-vial-panel + .apx-vial-panel {
  margin-top: 1.75rem;
}

.apx-vial-cap {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--apx-ink-2, #40566F);
  margin-bottom: .5rem;
}

/* --- the "no reliable dosing exists" panel ----------------------------
   Used instead of a table wherever the evidence does not support printing
   numbers. It is a first-class state, not an error. */
/* The evidence caveat. Its neighbour is the orange disclaimer, so this one
   takes the navy end of the brand rather than introducing a fifth hue. */
.apx-dose-none {
  background: var(--apx-wash, #F2F7FC);
  border: 1px solid var(--apx-line-2, #C3D4E5);
  border-left: 3px solid var(--apx-brand-navy, #0C1927);
  border-radius: 10px;
  padding: 1.1rem 1.3rem;
  margin: 1rem 0;
}

.apx-dose-none p {
  font-size: .84rem;
  line-height: 1.7;
  color: var(--apx-ink-2, #40566F);
  margin: .5rem 0 0;
}

.apx-dose-none p:first-child {
  margin-top: 0;
}

/* --- legend and disclaimer -------------------------------------------- */
.apx-dose-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.1rem;
  margin: 1rem 0 .75rem;
  padding: .85rem 1rem;
  background: #F5F9FD;
  border: 1px solid var(--apx-line, #D9E4F0);
  border-radius: 10px;
}

.apx-dose-legend div {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--apx-ink-2, #40566F);
}

.apx-dose-note {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  background: rgba(245, 130, 50, .07);
  border: 1px solid rgba(245, 130, 50, .35);
  border-radius: 10px;
  padding: .95rem 1.1rem;
  margin-top: .75rem;
}

.apx-dose-note span {
  font-size: 1.05rem;
  line-height: 1.3;
  flex-shrink: 0;
}

.apx-dose-note p {
  font-size: .79rem;
  line-height: 1.65;
  color: var(--apx-ink-2, #40566F);
  margin: 0;
}

.apx-dose-note strong {
  color: var(--apx-orange-ink, #B4530C);
}

.apx-dose-src {
  font-size: .74rem;
  line-height: 1.7;
  color: var(--apx-ink-3, #627286);
  margin-top: .75rem;
}

.apx-dose-src a {
  color: var(--apx-teal-ink, #0F7490);
}

@media (max-width: 700px) {
  .apx-dose h2 {
    font-size: 1.35rem;
  }

  .apx-dose-legend {
    flex-direction: column;
    gap: .45rem;
  }
}