/* ============================================================
   DailyLifeVital.com — Sitewide stylesheet
   Upload this one file to your site root and link to it from
   every page: <link rel="stylesheet" href="/tth-protein-article.css">

   Everything here is scoped under a top-level wrapper class, so
   the three sections below can safely coexist on the same page
   or live on separate pages without ever colliding with each
   other or with a WordPress theme:

     .tth-protein-article    — SEO/content styling (below any calculator)
     .tth-home               — the homepage (nav, hero, tool grid, FAQ…)
     .tth-protein-calculator — the protein calculator widget itself

   All three share one brand token system (color, radius, shadow),
   redeclared locally in each scope so any single section still
   works if it's ever copied out and used on its own.
   ============================================================ */

/* ============================================================
   SECTION 1 — Article / SEO content (.tth-protein-article)
   ============================================================ */

/* ============================================================
   DailyLifeVital.com — Protein Calculator content styles
   Scoped entirely under .tth-protein-article so nothing here
   touches the surrounding WordPress theme. Upload this file to
   your site root and link to it once — see embed instructions.
   ============================================================ */

.tth-protein-article {
  --tth-ink: #1c2521;
  --tth-ink-soft: #51625b;
  --tth-ink-faint: #7c8a83;
  --tth-bg: #f6f4ee;
  --tth-panel: #ffffff;
  --tth-border: #dfe0d6;
  --tth-primary: #1f5e4f;
  --tth-primary-dark: #163f37;
  --tth-primary-soft: #e3ede8;
  --tth-accent: #b6842a;
  --tth-accent-soft: #f6ecd9;

  max-width: 720px;
  margin: 56px auto 0;
  padding: 0 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--tth-ink);
  font-size: 16.5px;
  line-height: 1.7;
}
.tth-protein-article, .tth-protein-article * { box-sizing: border-box; }

/* ---- headings ---- */
.tth-protein-article h2 {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", ui-serif, serif;
  font-weight: 600;
  font-size: clamp(23px, 3vw, 28px);
  line-height: 1.3;
  color: var(--tth-primary-dark);
  letter-spacing: -0.01em;
  margin: 56px 0 16px;
  padding-left: 16px;
  border-left: 3px solid var(--tth-primary);
}
.tth-protein-article > h2:first-of-type,
.tth-protein-article h2:first-child {
  margin-top: 0;
}

.tth-protein-article h3 {
  font-family: inherit;
  font-weight: 700;
  font-size: 17.5px;
  color: var(--tth-ink);
  margin: 28px 0 8px;
}

/* FAQ answers: the paragraph right after a question gets a touch more room
   and a muted tone so the question itself stays the visual anchor. */
.tth-protein-article h3 + p {
  color: var(--tth-ink-soft);
  margin-top: 0;
}

/* ---- body text ---- */
.tth-protein-article p {
  margin: 0 0 16px;
  max-width: 68ch;
}

.tth-protein-article strong {
  color: var(--tth-ink);
  font-weight: 700;
}

.tth-protein-article em {
  font-style: italic;
}

.tth-protein-article a {
  color: var(--tth-primary);
  text-decoration: underline;
  text-decoration-color: var(--tth-border);
  text-underline-offset: 2px;
  transition: text-decoration-color .15s ease;
}
.tth-protein-article a:hover,
.tth-protein-article a:focus-visible {
  text-decoration-color: currentColor;
}
.tth-protein-article a:focus-visible {
  outline: 2px solid var(--tth-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- lists ---- */
.tth-protein-article ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  max-width: 68ch;
}
.tth-protein-article ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--tth-ink);
}
.tth-protein-article ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--tth-accent);
  transform: rotate(45deg);
}

/* Food-list items read better a touch more compact */
.tth-protein-article ul li:last-child { margin-bottom: 0; }

/* ---- medical disclaimer callout ---- */
.tth-protein-article .tth-callout {
  background: var(--tth-primary-soft);
  border-left: 3px solid var(--tth-primary);
  border-radius: 0 10px 10px 0;
  padding: 18px 20px;
  margin: 0 0 16px;
}
.tth-protein-article .tth-callout p {
  margin: 0;
  color: var(--tth-primary-dark);
  max-width: none;
}

/* ---- sources & references ---- */
.tth-protein-article .tth-sources-list {
  margin-top: 4px;
}
.tth-protein-article .tth-sources-list li {
  padding: 14px 16px 14px 40px;
  background: var(--tth-panel);
  border: 1px solid var(--tth-border);
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 15px;
  color: var(--tth-ink-soft);
}
.tth-protein-article .tth-sources-list li::before {
  left: 16px;
  top: 1.15em;
  background: none;
  border: 2px solid var(--tth-accent);
  transform: none;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}
.tth-protein-article .tth-sources-list a {
  font-weight: 600;
  color: var(--tth-primary-dark);
}

/* ---- small print / final disclaimer heading gets breathing room ---- */
.tth-protein-article h2 + .tth-callout {
  margin-top: 0;
}

/* ---- responsive ---- */
@media (max-width: 560px) {
  .tth-protein-article {
    margin-top: 40px;
    font-size: 16px;
  }
  .tth-protein-article h2 {
    margin-top: 44px;
    padding-left: 12px;
  }
  .tth-protein-article .tth-sources-list li {
    padding-left: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tth-protein-article * { transition: none !important; }
}


/* ============================================================
   SECTION 2 — Homepage (.tth-home)
   ============================================================ */

/* ============================================================
   DailyLifeVital.com — Homepage styles
   Upload to site root and link once in <head>. Scoped under
   .tth-home so it can safely sit alongside theme styles if this
   page ever gets wrapped in a WordPress template.
   ============================================================ */

.tth-home {
  --tth-ink: #1c2521;
  --tth-ink-soft: #51625b;
  --tth-ink-faint: #7c8a83;
  --tth-bg: #f6f4ee;
  --tth-panel: #ffffff;
  --tth-border: #dfe0d6;
  --tth-primary: #1f5e4f;
  --tth-primary-dark: #163f37;
  --tth-primary-soft: #e3ede8;
  --tth-accent: #b6842a;
  --tth-accent-soft: #f6ecd9;
  --tth-error: #b3261e;
  --tth-error-soft: #fbeceb;
  --tth-warn: #8a5a00;
  --tth-warn-soft: #fdf3dc;
  --tth-radius-lg: 20px;
  --tth-radius-md: 12px;
  --tth-radius-sm: 8px;
  --tth-shadow: 0 1px 2px rgba(28,37,33,0.04), 0 8px 24px rgba(28,37,33,0.06);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--tth-ink);
  background: var(--tth-bg);
  line-height: 1.55;
}
.tth-home, .tth-home * { box-sizing: border-box; }
.tth-home *:focus-visible {
  outline: 2px solid var(--tth-primary);
  outline-offset: 2px;
}
.tth-home a { color: inherit; text-decoration: none; }
.tth-home a:link,
.tth-home a:visited,
.tth-home a:hover,
.tth-home a:active { text-decoration: none; }

.tth-serif {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", ui-serif, serif;
}

.tth-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------- */
/* Header                                                       */
/* ---------------------------------------------------------- */
.tth-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 244, 238, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--tth-border);
}
.tth-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 20px;
}
.tth-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
  color: var(--tth-primary-dark);
  white-space: nowrap;
}
.tth-logo-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--tth-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tth-logo-mark svg { width: 16px; height: 16px; }

.tth-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.tth-nav a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tth-ink-soft);
  transition: color .15s ease;
}
.tth-nav a:hover { color: var(--tth-primary-dark); }

.tth-nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 8px;
  background: var(--tth-primary);
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  transition: background-color .15s ease;
}
.tth-nav-cta:hover { background: var(--tth-primary-dark); color: #fff !important; }

@media (max-width: 720px) {
  .tth-nav a:not(.tth-nav-cta) { display: none; }
}

/* ---------------------------------------------------------- */
/* Hero                                                          */
/* ---------------------------------------------------------- */
.tth-hero {
  padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 8vw, 100px);
}
.tth-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
  .tth-hero-grid { grid-template-columns: 1fr; }
}

.tth-eyebrow-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tth-primary-dark);
  margin-bottom: 18px;
}
.tth-eyebrow-line::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--tth-accent);
  display: inline-block;
}

.tth-hero h1 {
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--tth-primary-dark);
  margin: 0 0 20px;
  max-width: 15ch;
}
.tth-hero-lede {
  font-size: 18px;
  color: var(--tth-ink-soft);
  max-width: 46ch;
  margin: 0 0 32px;
}

.tth-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
}
.tth-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--tth-primary);
  color: #fff;
  font-weight: 700;
  font-size: 15.5px;
  border-radius: 10px;
  transition: background-color .15s ease, transform .1s ease;
}
.tth-btn-primary:hover { background: var(--tth-primary-dark); }
.tth-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: transparent;
  color: var(--tth-primary-dark);
  font-weight: 700;
  font-size: 15.5px;
  border-radius: 10px;
  border: 1.5px solid var(--tth-border);
  transition: border-color .15s ease, background-color .15s ease;
}
.tth-btn-secondary:hover { border-color: var(--tth-primary); background: var(--tth-primary-soft); }

.tth-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.tth-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tth-ink-soft);
}
.tth-trust-item svg { width: 16px; height: 16px; color: var(--tth-primary); flex: 0 0 auto; }

/* Hero visual: an illustrative, non-functional preview of a
   calculator "in motion" — the site's actual product, not a
   generic gradient blob. */
.tth-hero-visual { display: flex; justify-content: center; }
.tth-demo-card {
  width: 100%;
  max-width: 380px;
  background: var(--tth-panel);
  border: 1px solid var(--tth-border);
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 1px 2px rgba(28,37,33,.04), 0 24px 48px -12px rgba(22,63,55,.22);
  transform: rotate(-1.6deg);
}
.tth-demo-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.tth-demo-card-title { font-size: 13px; font-weight: 700; color: var(--tth-ink-soft); }
.tth-demo-dot-row { display: flex; gap: 5px; }
.tth-demo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tth-border); }

.tth-demo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dashed var(--tth-border);
  font-size: 14px;
}
.tth-demo-row:last-of-type { border-bottom: none; }
.tth-demo-label { color: var(--tth-ink-faint); }
.tth-demo-value { font-weight: 700; color: var(--tth-ink); }

.tth-demo-result {
  margin-top: 18px;
  background: var(--tth-primary-soft);
  border-radius: 12px;
  padding: 16px 18px;
}
.tth-demo-result-label { font-size: 12px; font-weight: 700; color: var(--tth-primary-dark); opacity: .8; }
.tth-demo-result-value {
  font-family: Georgia, ui-serif, serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--tth-primary-dark);
  margin-top: 2px;
}

/* ---------------------------------------------------------- */
/* Section shell                                                 */
/* ---------------------------------------------------------- */
.tth-section { padding: clamp(48px, 7vw, 80px) 0; }
.tth-section-panel { background: var(--tth-panel); border-top: 1px solid var(--tth-border); border-bottom: 1px solid var(--tth-border); }

.tth-section-head {
  max-width: 640px;
  margin: 0 0 40px;
}
.tth-section-head h2 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  color: var(--tth-primary-dark);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  padding-left: 16px;
  border-left: 3px solid var(--tth-primary);
}
.tth-section-head p {
  color: var(--tth-ink-soft);
  font-size: 16px;
  margin: 0;
}

/* ---------------------------------------------------------- */
/* Tool cards                                                    */
/* ---------------------------------------------------------- */
.tth-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .tth-tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tth-tool-grid { grid-template-columns: 1fr; } }

/* "Explore more" / "See full details" links that point from a homepage
   teaser section to that section's dedicated page. */
.tth-section-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tth-primary);
}
.tth-section-more svg {
  width: 15px;
  height: 15px;
  transition: transform .15s ease;
}
.tth-section-more:hover svg { transform: translateX(3px); }
.tth-section-more:hover { color: var(--tth-primary-dark); }

/* Category groupings used on the dedicated /calculators/ page */
.tth-category-block { margin-bottom: 48px; }
.tth-category-block:last-child { margin-bottom: 0; }
.tth-category-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tth-ink-faint);
  margin: 0 0 16px;
}

.tth-tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--tth-panel);
  border: 1px solid var(--tth-border);
  border-radius: 16px;
  padding: 24px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tth-tool-card.tth-is-live {
  border-color: var(--tth-primary);
}
a.tth-tool-card:hover {
  box-shadow: 0 12px 28px -10px rgba(28,37,33,.14);
  transform: translateY(-2px);
}
.tth-tool-tag {
  display: inline-flex;
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tth-primary-soft);
  color: var(--tth-primary-dark);
  margin-bottom: 14px;
}
.tth-tool-card.tth-is-soon .tth-tool-tag {
  background: var(--tth-accent-soft);
  color: var(--tth-accent);
}
.tth-tool-card h3 {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--tth-ink);
  margin: 0 0 8px;
}
.tth-tool-card p {
  font-size: 14px;
  color: var(--tth-ink-soft);
  margin: 0 0 18px;
  flex-grow: 1;
}
.tth-tool-card-cta {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tth-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tth-tool-card.tth-is-soon .tth-tool-card-cta {
  color: var(--tth-ink-faint);
}
.tth-tool-card-cta svg { width: 14px; height: 14px; transition: transform .15s ease; }
a.tth-tool-card:hover .tth-tool-card-cta svg { transform: translateX(3px); }

/* ---------------------------------------------------------- */
/* Methodology (a genuine sequence, so numbering earns its keep) */
/* ---------------------------------------------------------- */
.tth-method-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: tth-step;
}
@media (max-width: 900px) { .tth-method-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tth-method-list { grid-template-columns: 1fr; } }

.tth-method-item { counter-increment: tth-step; }
.tth-method-num {
  font-family: Georgia, ui-serif, serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--tth-accent);
  margin-bottom: 10px;
}
.tth-method-num::before { content: counter(tth-step, decimal-leading-zero); }
.tth-method-item h3 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--tth-ink);
  margin: 0 0 6px;
}
.tth-method-item p {
  font-size: 13.5px;
  color: var(--tth-ink-soft);
  margin: 0;
}

/* ---------------------------------------------------------- */
/* FAQ                                                           */
/* ---------------------------------------------------------- */
.tth-faq-list {
  max-width: 760px;
}
.tth-faq-item {
  padding: 22px 0;
  border-bottom: 1px solid var(--tth-border);
}
.tth-faq-item:first-child { padding-top: 0; }
.tth-faq-item:last-child { border-bottom: none; }
.tth-faq-item h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--tth-ink);
  margin: 0 0 8px;
  padding-left: 16px;
  border-left: 2px solid var(--tth-accent);
}
.tth-faq-item p {
  font-size: 15px;
  color: var(--tth-ink-soft);
  margin: 0;
  padding-left: 18px;
  max-width: 62ch;
}

/* ---------------------------------------------------------- */
/* Disclaimer strip                                              */
/* ---------------------------------------------------------- */
.tth-disclaimer-strip {
  font-size: 13px;
  color: var(--tth-ink-faint);
  border-top: 1px solid var(--tth-border);
  padding-top: 20px;
  max-width: 78ch;
}

/* ---------------------------------------------------------- */
/* Footer                                                        */
/* ---------------------------------------------------------- */
.tth-footer { padding: 48px 0 32px; }
.tth-footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--tth-border);
  margin-bottom: 24px;
}
.tth-footer-brand p {
  color: var(--tth-ink-soft);
  font-size: 14px;
  max-width: 34ch;
  margin: 10px 0 0;
}
.tth-footer-cols {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
}
.tth-footer-col h4 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tth-ink-faint);
  margin: 0 0 12px;
}
.tth-footer-col a {
  display: block;
  font-size: 14px;
  color: var(--tth-ink-soft);
  margin-bottom: 9px;
  transition: color .15s ease;
}
.tth-footer-col a:hover { color: var(--tth-primary-dark); }
.tth-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--tth-ink-faint);
}

@media (prefers-reduced-motion: reduce) {
  .tth-home * { transition: none !important; }
}


/* ============================================================
   SECTION 3 — Protein Calculator widget (.tth-protein-calculator)
   ============================================================ */

  /* ============================================================
     Scoped styles — everything nested under .tth-protein-calculator
     so nothing leaks into the surrounding WordPress theme.
     ============================================================ */
  .tth-protein-calculator {
    --tth-ink: #1c2521;
    --tth-ink-soft: #51625b;
    --tth-bg: #f6f4ee;
    --tth-panel: #ffffff;
    --tth-border: #dfe0d6;
    --tth-primary: #1f5e4f;
    --tth-primary-dark: #163f37;
    --tth-primary-soft: #e3ede8;
    --tth-accent: #b6842a;
    --tth-error: #b3261e;
    --tth-radius-lg: 20px;
    --tth-radius-md: 12px;
    --tth-radius-sm: 8px;
    --tth-shadow: 0 1px 2px rgba(28,37,33,0.04), 0 8px 24px rgba(28,37,33,0.06);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--tth-ink);
    background: var(--tth-bg);
    padding: clamp(16px, 4vw, 40px);
    border-radius: var(--tth-radius-lg);
    box-sizing: border-box;
    max-width: 1160px;
    margin: 0 auto;
    line-height: 1.5;
  }
  .tth-protein-calculator, .tth-protein-calculator * { box-sizing: border-box; }
  .tth-protein-calculator *:focus-visible {
    outline: 2px solid var(--tth-primary);
    outline-offset: 2px;
  }

  .tth-pc-hidden { display: none !important; }

  .tth-pc-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 20px;
    align-items: start;
  }
  @media (max-width: 860px) {
    .tth-pc-grid { grid-template-columns: 1fr; }
  }

  .tth-pc-panel {
    background: var(--tth-panel);
    border: 1px solid var(--tth-border);
    border-radius: var(--tth-radius-lg);
    padding: clamp(18px, 3vw, 32px);
    box-shadow: var(--tth-shadow);
  }

  .tth-pc-results { position: sticky; top: 16px; }
  @media (max-width: 860px) { .tth-pc-results { position: static; } }

  .tth-pc-title {
    margin: 0 0 6px;
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--tth-primary-dark);
  }
  .tth-pc-subtitle {
    margin: 0 0 24px;
    color: var(--tth-ink-soft);
    font-size: 14.5px;
    max-width: 46ch;
  }

  .tth-pc-field { margin-bottom: 22px; border: none; padding: 0; }
  .tth-pc-field label,
  .tth-pc-legend-label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--tth-ink);
  }
  .tth-pc-required { color: var(--tth-accent); }
  .tth-pc-optional { font-weight: 400; color: var(--tth-ink-soft); }

  .tth-pc-field input[type="number"] {
    width: 100%;
    font-size: 16px;
    padding: 12px 14px;
    border: 1.5px solid var(--tth-border);
    border-radius: var(--tth-radius-sm);
    background: #fff;
    color: var(--tth-ink);
    transition: border-color .15s ease;
    -moz-appearance: textfield;
  }
  .tth-pc-field input[type="number"]:focus {
    border-color: var(--tth-primary);
  }
  .tth-pc-field input[type="number"]::-webkit-outer-spin-button,
  .tth-pc-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }
  .tth-pc-field input.tth-pc-invalid { border-color: var(--tth-error); }

  .tth-pc-hint {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--tth-ink-soft);
  }
  .tth-pc-error {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--tth-error);
    font-weight: 600;
  }

  /* Weight / height rows with a unit toggle beside the input */
  .tth-pc-input-with-unit {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
  }
  .tth-pc-input-with-unit > input[type="number"] { flex: 1 1 140px; min-width: 0; }
  .tth-pc-height-wrap { display: flex; gap: 8px; flex: 1 1 140px; min-width: 0; }
  .tth-pc-height-wrap input { flex: 1 1 0; min-width: 0; }

  .tth-pc-unit-toggle {
    display: inline-flex;
    border: 1.5px solid var(--tth-border);
    border-radius: var(--tth-radius-sm);
    overflow: hidden;
    flex: 0 0 auto;
    height: 46px;
  }
  .tth-pc-unit-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .tth-pc-unit-toggle label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tth-ink-soft);
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, color .15s ease;
  }
  .tth-pc-unit-toggle label:first-of-type { border-right: 1.5px solid var(--tth-border); }
  .tth-pc-unit-toggle input:checked + label {
    background: var(--tth-primary);
    color: #fff;
  }
  .tth-pc-unit-toggle input:focus-visible + label { outline: 2px solid var(--tth-primary); outline-offset: -2px; }

  /* Sex segmented control reuses the same look but full width */
  .tth-pc-segmented {
    display: inline-flex;
    border: 1.5px solid var(--tth-border);
    border-radius: var(--tth-radius-sm);
    overflow: hidden;
  }
  .tth-pc-segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .tth-pc-segmented label {
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tth-ink-soft);
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, color .15s ease;
  }
  .tth-pc-segmented label:first-of-type { border-right: 1.5px solid var(--tth-border); }
  .tth-pc-segmented input:checked + label { background: var(--tth-primary); color: #fff; }
  .tth-pc-segmented input:focus-visible + label { outline: 2px solid var(--tth-primary); outline-offset: -2px; }

  /* Selectable cards for activity + goal */
  .tth-pc-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  @media (max-width: 520px) { .tth-pc-cards { grid-template-columns: 1fr; } }
  .tth-pc-cards input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .tth-pc-card {
    display: block;
    border: 1.5px solid var(--tth-border);
    border-radius: var(--tth-radius-md);
    padding: 12px 14px;
    cursor: pointer;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  }
  .tth-pc-card:hover { border-color: var(--tth-primary); }
  .tth-pc-card-title {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: var(--tth-ink);
    margin-bottom: 3px;
  }
  .tth-pc-card-desc {
    display: block;
    font-size: 12.5px;
    color: var(--tth-ink-soft);
    line-height: 1.35;
  }
  .tth-pc-cards input:checked + .tth-pc-card {
    border-color: var(--tth-primary);
    background: var(--tth-primary-soft);
    box-shadow: inset 0 0 0 1px var(--tth-primary);
  }
  .tth-pc-cards input:checked + .tth-pc-card .tth-pc-card-title { color: var(--tth-primary-dark); }
  .tth-pc-cards input:focus-visible + .tth-pc-card { outline: 2px solid var(--tth-primary); outline-offset: 2px; }

  /* Results panel */
  .tth-pc-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    text-align: center;
    color: var(--tth-ink-soft);
    font-size: 15px;
    padding: 20px;
  }
  .tth-pc-result-label {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
    color: var(--tth-ink-soft);
  }
  .tth-pc-range {
    margin: 0 0 20px;
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--tth-primary-dark);
  }
  .tth-pc-target-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--tth-primary-soft);
    border-radius: var(--tth-radius-md);
    padding: 14px 16px;
    margin-bottom: 20px;
  }
  .tth-pc-target-label { font-size: 13.5px; font-weight: 600; color: var(--tth-primary-dark); }
  .tth-pc-target-value { font-size: 19px; font-weight: 800; color: var(--tth-primary-dark); }

  .tth-pc-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    margin: 0 0 20px;
    padding: 16px 0 0;
    border-top: 1px solid var(--tth-border);
  }
  .tth-pc-details dt {
    font-size: 12px;
    color: var(--tth-ink-soft);
    margin-bottom: 2px;
  }
  .tth-pc-details dd {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--tth-ink);
  }

  .tth-pc-disclaimer {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--tth-ink-soft);
    padding-top: 14px;
    border-top: 1px solid var(--tth-border);
  }

  /* Respect reduced-motion preferences */
  @media (prefers-reduced-motion: reduce) {
    .tth-protein-calculator * { transition: none !important; }
  }


/* ============================================================
   SECTION 4 — Shared additions for the clinical / dosing tools
   (dropdowns, date + text fields, alert boxes, result tables,
   copy button). Reuses the .tth-pc-* widget system above.
   ============================================================ */

.tth-pc-field select,
.tth-pc-field input[type="date"],
.tth-pc-field input[type="text"] {
  width: 100%;
  font-size: 16px;
  padding: 12px 14px;
  border: 1.5px solid var(--tth-border);
  border-radius: var(--tth-radius-sm);
  background: #fff;
  color: var(--tth-ink);
  font-family: inherit;
  transition: border-color .15s ease;
}
.tth-pc-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2351625b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.tth-pc-field select:focus,
.tth-pc-field input[type="date"]:focus,
.tth-pc-field input[type="text"]:focus { border-color: var(--tth-primary); }
.tth-pc-field input.tth-pc-invalid,
.tth-pc-field select.tth-pc-invalid { border-color: var(--tth-error); }

.tth-pc-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) { .tth-pc-two-col { grid-template-columns: 1fr; } }
.tth-pc-two-col label { font-weight: 500; font-size: 13px; color: var(--tth-ink-soft); margin-bottom: 6px; }

/* Alert / note boxes (populated by each calculator's script) */
.tth-pc-alert,
.tth-pc-note {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--tth-radius-sm);
  font-size: 13.5px;
  line-height: 1.5;
  border-left: 3px solid var(--tth-warn);
  background: var(--tth-warn-soft);
  color: #4a3200;
}
.tth-pc-alert-danger {
  border-left-color: var(--tth-error);
  background: var(--tth-error-soft);
  color: #6b1712;
  font-weight: 600;
}
.tth-pc-note {
  border-left-color: var(--tth-primary);
  background: var(--tth-primary-soft);
  color: var(--tth-primary-dark);
  font-weight: 400;
}
.tth-pc-topalert {
  margin: 0 0 20px;
  padding: 16px 18px;
  border-radius: var(--tth-radius-md);
  border: 1.5px solid var(--tth-error);
  background: var(--tth-error-soft);
  color: #6b1712;
  font-size: 14.5px;
  font-weight: 600;
}
.tth-pc-topalert p { margin: 0; }

/* Result tables (steroid equivalents, taper schedule, IBW formulas) */
.tth-table-wrap {
  overflow-x: auto;
  margin: 0 0 18px;
  border: 1px solid var(--tth-border);
  border-radius: var(--tth-radius-md);
  background: #fff;
}
.tth-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  color: var(--tth-ink);
}
.tth-table th,
.tth-table td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--tth-border);
  white-space: nowrap;
}
.tth-table th {
  font-size: 12px;
  font-weight: 700;
  color: var(--tth-ink-soft);
  background: var(--tth-bg);
}
.tth-table tr:last-child td { border-bottom: none; }
.tth-table td.tth-num,
.tth-table th.tth-num { text-align: right; font-variant-numeric: tabular-nums; }
.tth-table tr.tth-row-hl td { background: var(--tth-primary-soft); font-weight: 700; color: var(--tth-primary-dark); }

/* Small action button (copy schedule) */
.tth-pc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--tth-radius-sm);
  border: 1.5px solid var(--tth-primary);
  background: #fff;
  color: var(--tth-primary-dark);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease;
}
.tth-pc-btn:hover { background: var(--tth-primary-soft); }
.tth-pc-btn-status { margin-left: 10px; font-size: 13px; color: var(--tth-ink-soft); }

/* Tables inside article content (reference tables) */
.tth-protein-article .tth-table-wrap { max-width: 68ch; }
.tth-protein-article .tth-table td,
.tth-protein-article .tth-table th { white-space: normal; }
.tth-protein-article code {
  font-size: 0.92em;
  background: var(--tth-primary-soft);
  padding: 1px 6px;
  border-radius: 4px;
}