/* Protocol Her — compound guide page styles (semaglutide, tirzepatide,
   retatrutide, BPC-157, GHK-Cu). app.css is Tailwind compiled from the
   marketing pages only, so every class specific to the guides lives here as
   plain CSS (no build step). Palette and rhythm mirror the brand values in
   tailwind-src/tailwind.config.js and the calculator page. */

/* ------------------------------------------------- Educational banner */
/* Same amber strip and the same reading order as the calculator: the rule is
   stated before any numbers appear on the page. */
.guide-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(201, 149, 108, 0.1);
  border: 1px solid rgba(201, 149, 108, 0.22);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.58);
}
.guide-banner svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  color: #D4A77F;
}

/* --------------------------------------------------------- Name chips */
/* The shorthand people actually type, shown next to the full name. */
.guide-alias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.guide-alias span {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(242, 196, 206, 0.14);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

/* ------------------------------------------------------ Catalog badges */
/* Mirrors the app's always-on classification label. Neutral styling at every
   status: the badge states the classification, it never colors a judgement. */
.guide-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.guide-badge {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(242, 196, 206, 0.22);
  background: rgba(242, 196, 206, 0.05);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

/* --------------------------------------------------------- Fact rows */
.guide-spec {
  margin-top: 4px;
  border-top: 1px solid rgba(242, 196, 206, 0.1);
}
.guide-spec > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(242, 196, 206, 0.1);
}
.guide-spec dt {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}
.guide-spec dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-align: right;
}

/* ---------------------------------------------------- Worked example */
.guide-step-number {
  font-family: 'Tenor Sans', serif;
  font-size: 28px;
  line-height: 1;
  color: #EBA4B7;
  margin-bottom: 12px;
}
.guide-formula {
  display: block;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(242, 196, 206, 0.1);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  overflow-wrap: break-word;
}
/* Show-your-work strip, same treatment as the calculator's reference line. */
.guide-ref {
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(242, 196, 206, 0.12);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.58);
  overflow-wrap: break-word;
}
/* Factual notes — standing body color, no alarm styling (app rule). */
.guide-note {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 10px;
}
.guide-caption {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 7px;
}

/* -------------------------------------------------------------- Lists */
.guide-list {
  margin-top: 18px;
}
.guide-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
}
.guide-list li:last-child { margin-bottom: 0; }
.guide-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(224, 122, 152, 0.8);
}
.guide-list li strong {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

/* ---------------------------------------------------- Related guides */
.guide-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.guide-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(242, 196, 206, 0.03);
  border: 1px solid rgba(242, 196, 206, 0.14);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.guide-chip:hover {
  border-color: rgba(235, 164, 183, 0.4);
  background: rgba(242, 196, 206, 0.06);
  color: #fff;
}
.guide-chip span {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
}