/* ===============================
   Base & Reset
================================ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f5f3f0;
  color: #2d2d2d;
}

/* ===============================
   Layout
================================ */

.container {
  max-width: 520px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Reduce space between header and main content */
main.container {
  margin-top: 20px;
}

/* ===============================
   Header (Ad-safe)
================================ */

.site-header {
  background: transparent;
  border-bottom: none;
  margin: 0;
  padding: 8px 0;
}

/* Reserved space for future ads */
.header-ad-slot {
  min-height: 0;         /* No ad yet */
  width: 100%;
}

/* Header inner */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.header-nav a {
  font-weight: 500;
  text-decoration: none;
  color: #2d5016;
}

/* Logo */
.site-header img {
  height: 38px;
  width: auto;
  margin-right: 6px;
}

.site-nav a {
  font-weight: 500;
  text-decoration: none;
  color: #4a4a4a;
  opacity: 0.85;
}

.site-nav a:hover {
  text-decoration: underline;
  opacity: 1;
  color: #2d5016;
}

.site-nav {
  margin-left: auto;
}

.site-nav a {
  margin-left: 18px;
  font-size: 0.95rem;
  font-weight: 500;
}

/* ===============================
   Header spacing fix
================================ */

.site-header .container {
  margin: 0 auto;
  padding: 0;
}

/* ===============================
   Typography
================================ */

h1 {
  text-align: center;
  font-size: 2rem;
  color: #2d5016;
  margin-bottom: 10px;
}

h2 {
  color: #2d5016;
  margin-top: 40px;
  margin-bottom: 15px;
}

h3 {
  color: #2d5016;
  margin-top: 30px;
}

p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 10px 0;
}

.hint {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #777;
  text-align: center;
  font-style: italic;
}

.intro {
  text-align: center;
  margin-bottom: 30px;
  color: #555;
}

/* ===============================
   Forms & Inputs
================================ */

label {
  display: block;
  margin-bottom: 20px;
  font-weight: 600;
  color: #2d2d2d;
}

input[type="number"],
input[type="date"],
input[type="text"],
input[type="email"] {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
}

input:focus {
  outline: none;
  border-color: #2d5016;
}

/* ===============================
   Select (Dropdowns)
================================ */

select {
  width: 100%;
  margin-top: 6px;
  padding: 12px 40px 12px 12px;
  font-size: 1rem;
  font-family: inherit;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;

  /* Remove default OS styling */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Custom dropdown arrow */
  background-image:
    linear-gradient(45deg, transparent 50%, #555 50%),
    linear-gradient(135deg, #555 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px);
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}

select:focus {
  outline: none;
  border-color: #2d5016;
}

/* Disabled state */
select:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

/* Ensure label spacing consistency */
label select {
  margin-top: 6px;
}

/* ===============================
   Hub & Cross-Navigation Links
================================ */

.hub-link {
  margin: 18px 0 28px;
  font-size: 0.95rem;
  color: #555;
  text-align: center;
}

.hub-link a {
  font-weight: 600;
  color: #2d5016;
  text-decoration: none;
}

.hub-link a:hover {
  text-decoration: underline;
  color: #3d6b1f;
}

/* ===============================
   Results Box
================================ */

.result {
  margin-top: 25px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  font-size: 1.05rem;
}

.result p {
  margin: 8px 0;
}

/* ===============================
   Tool List (Homepage)
================================ */

.tools {
  margin-top: 40px;
}

.tool-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tool-list li {
  background: #fff;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.tool-list li:hover {
  border-left-color: #2d5016;
}

.tool-list__desc {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: #777;
  line-height: 1.4;
  margin-top: 3px;
  text-decoration: none;
}

.tool-list li a {
  display: block;
  padding: 16px;
  color: inherit;
  text-decoration: none;
}

.tool-list li a:hover {
  background: #f5f9f2;
  text-decoration: none;
}

/* ===============================
   Footer
================================ */

.site-footer {
  background: transparent;
  border-top: none;
  margin-top: 40px;
}

.site-footer .container {
  text-align: center;
  padding: 10px 0;
}

.footer-links {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 6px;
  line-height: 1.5;
}

.footer-links a {
  color: #777;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
  color: #2d5016;
}

.footer-copy {
  font-size: 0.75rem;
  color: #999;
  margin: 0;
}

/* ===============================
   Mobile
================================ */

@media (max-width: 400px) {
  .container {
    margin: 25px auto;
    padding: 0 15px;
  }

  h1 {
    font-size: 1.6rem;
  }
}

/* ===============================
   Mobile Header
================================ */

@media (max-width: 480px) {

  .header-inner {
    padding: 6px 0;
  }

  .site-header img {
    height: 32px;
  }
}

/* =========================
   Tool list grouping labels
   ========================= */

.tool-group {
  list-style: none;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  color: #2d5016;
}

.tool-group + li {
  margin-top: 0.25rem;
}

.related-calculators {
  margin-top: 2.5rem;
  font-size: 0.9rem;
  color: #666;
}

.related-calculators a {
  font-weight: 500;
  color: #2d5016;
}

.related-calculators a:hover {
  text-decoration: underline;
}

/* ===============================
   Homepage Enhancements
   =============================== */

/* Hero section */
.hero {
  margin-bottom: 35px;
}

.hero h1 {
  margin-bottom: 12px;
}

.hero .intro {
  font-size: 1.05rem;
}

/* ===============================
   Category Hub
   =============================== */

.categories {
  margin-top: 40px;
}

.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.category-card {
  display: block;
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.category-card:hover {
  background: #f5f9f2;
  border-left-color: #2d5016;
}

.category-card h3 {
  margin-top: 0;
  margin-bottom: 6px;
  font-size: 1.1rem;
  color: #2d5016;
}

.category-card p {
  margin: 0;
  font-size: 0.95rem;
  color: #666;
}

/* ===============================
   Popular Tools
   =============================== */

.popular-tools {
  margin-top: 45px;
}

/* Reuse existing tool-list styles */
.popular-tools .tool-list li {
  margin-bottom: 10px;
}

/* ===============================
   Authority Content
   =============================== */

.authority {
  margin-top: 45px;
  font-size: 0.95rem;
  color: #555;
}

.authority p {
  margin-bottom: 12px;
}

.authority a {
  font-weight: 500;
  color: #2d5016;
}

.authority a:hover {
  text-decoration: underline;
}

/* Archery supplies callout box */
.supplies-callout {
  background: #f5f9f2;
  padding: 20px 24px;
  border-radius: 8px;
  margin: 30px 0;
  border-left: 4px solid #2d5016;
}

.supplies-callout h2 {
  margin-top: 0;
  font-size: 1.3rem;
  color: #2d5016;
}

.supplies-callout p {
  margin-bottom: 16px;
}

.supplies-callout p:last-child {
  margin-bottom: 0;
}

.supplies-callout a {
  color: #2d5016;
  font-weight: 600;
}

/* ===============================
   FAQ Section
   =============================== */

.faq {
  margin-top: 45px;
}

.faq h3 {
  margin-top: 22px;
  margin-bottom: 6px;
  font-size: 1rem;
  color: #2d5016;
}

.faq p {
  margin-top: 0;
  font-size: 0.95rem;
  color: #555;
}

.faq a {
  color: #2d5016;
  font-weight: 500;
}

/* ===============================
   Comparison Tables (SEO)
================================ */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.95rem;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

thead {
  background: #f5f9f2;
}

th,
td {
  padding: 12px 14px;
  text-align: left;
}

th {
  font-weight: 600;
  color: #2d5016;
}

tbody tr:not(:last-child) {
  border-bottom: 1px solid #eee;
}

tbody tr strong {
  color: #111;
}

@media (max-width: 480px) {
  table {
    font-size: 0.9rem;
  }
}

/* ===============================
   Tooltip (calculator hints)
================================ */

.tooltip {
  position: relative;
  display: inline-block;
  margin-left: 4px;
  cursor: help;
  font-size: 0.9em;
  opacity: 0.7;
}

.tooltip:hover {
  opacity: 1;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: 125%;
  transform: translateX(-50%);
  min-width: 220px;
  max-width: 280px;
  padding: 8px 10px;
  background: #111;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.4;
  border-radius: 6px;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10;
}

.tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 115%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #111 transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.tooltip:hover::after,
.tooltip:hover::before {
  opacity: 1;
}

/* ===============================
   Primary Tool Highlight Box
   =============================== */

.primary-tool {
  margin: 1.75rem 0 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #2d5016;
  background-color: #f9fafb;
  border-radius: 6px;
}

.primary-tool__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin-bottom: 0.35rem;
}

.primary-tool__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  line-height: 1.35;
}

.primary-tool__title a {
  color: #111827;
  text-decoration: none;
}

.primary-tool__title a:hover {
  text-decoration: underline;
  color: #2d5016;
}

.primary-tool__description {
  font-size: 0.9rem;
  color: #374151;
  margin: 0;
}

.primary-tool + section {
  margin-top: 2.5rem;
}

/* ===============================
   Calculator breakdown toggle
================================ */

.calc-toggle {
  border: none;
  cursor: pointer;
}

.calc-breakdown {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
}

.calc-breakdown .muted {
  color: #777;
  font-weight: 500;
  font-size: 0.95rem;
}


/* ===============================
   Call-to-Action Wrappers
=============================== */

/* Hero section CTA */
.hero-cta {
  text-align: center;
  margin-top: 20px;
}

/* Calculator pages CTA */
.calculator-cta {
  text-align: center;
  margin: 18px 0 28px;
}

/* Guide page CTA */
.guide-cta {
  text-align: center;
  margin: 18px 0 28px;
}

/* FAQ page CTA */
.faq-cta {
  text-align: center;
  margin: 18px 0 28px;
}

/* ===============================
   Buttons
================================ */

.btn-primary {
  display: inline-block;
  padding: 12px 22px;
  background-color: #2d5016;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #3d6b1f;
}

.btn-secondary {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f5f9f2;
  color: #2d5016;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.2s;
  border: 1px solid #d4e3c7;
}

.btn-secondary:hover {
  background-color: #e8f2dc;
}

/* ===============================
   Lead Capture / Email Form
================================ */
.lead-capture {
  margin-top: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.lead-capture form {
  display: grid;
  gap: 16px;
}

.lead-capture label {
  font-weight: 600;
  font-size: 0.95rem;
}

.lead-capture input[type="text"],
.lead-capture input[type="email"] {
  padding: 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 100%;
}

.lead-capture button {
  display: inline-block;
  padding: 12px 22px;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  background-color: #2d5016;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.lead-capture button:hover {
  background-color: #3d6b1f;
}


/* ===============================
   Download Report Form Spacing
================================ */
#downloadReportForm label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

#downloadReportForm input {
  display: block;
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
}

#downloadReportForm button {
  margin-top: 10px;
}

/* ===============================
   Archery calculators (Shared)
   Patch for calculator-form + text inputs + result box
================================ */

/* Make calculator forms consistent */
.calculator-form {
  display: grid;
  gap: 16px;
}

/* Override global label spacing for forms */
.calculator-form label {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Style text inputs used for various fields */
.calculator-form input[type="text"],
.calculator-form input[type="email"],
.calculator-form input[type="number"],
.calculator-form input[type="date"] {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
}

.calculator-form input:focus,
.calculator-form select:focus {
  outline: none;
  border-color: #2d5016;
}

/* Result container */
.calculator-result {
  margin-top: 14px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  font-size: 1.05rem;
}

.calculator-result p {
  margin: 8px 0;
}

/* Generic muted helper */
.muted {
  color: #777;
  font-weight: 500;
  font-size: 0.95rem;
}

/* Optional: tighten checkbox label spacing inside calculator */
.calculator-form label input[type="checkbox"] {
  margin: 0;
}

/* ===============================
   Archery Calculator Homepage Styles
   =============================== */

/* Quick Start Box */
.quick-start-box {
  margin: 28px 0 35px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f5f9f2 0%, #e8f2dc 100%);
  border-left: 4px solid #2d5016;
  border-radius: 10px;
}

.quick-start-label {
  margin: 0 0 6px 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #2d5016;
}

.quick-start-text {
  margin: 0;
  font-size: 0.95rem;
  color: #2d2d2d;
  line-height: 1.5;
}

.quick-start-text a {
  color: #2d5016;
  font-weight: 600;
  text-decoration: underline;
}

/* Section Headers */
.calculators-section {
  margin-top: 45px;
}

.section-heading {
  font-size: 1.5rem;
  color: #2d5016;
  margin: 0 0 6px 0;
  text-align: center;
}

.section-intro {
  text-align: center;
  color: #666;
  font-size: 0.95rem;
  margin: 0 0 22px 0;
}

/* Calculator Card Grid */
.calculator-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

@media (min-width: 640px) {
  .calculator-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Calculator Cards */
.calc-card {
  display: block;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.2s ease;
  position: relative;
  border-left: 3px solid transparent;
}

.calc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border-left-color: #2d5016;
}

.calc-card__icon {
  font-size: 2rem;
  margin-bottom: 10px;
  line-height: 1;
}

.calc-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2d5016;
  margin: 0 0 8px 0;
}

.calc-card__desc {
  font-size: 0.9rem;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

.calc-card__tag {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  background: #f5f9f2;
  color: #2d5016;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Primary Card (highlighted calculator) */
.calc-card--primary {
  background: linear-gradient(135deg, #f5f9f2 0%, #e8f2dc 100%);
  border-color: #2d5016;
  border-width: 2px;
  border-left-width: 4px;
}

.calc-card--primary:hover {
  border-color: #3d6b1f;
}

/* Urgent/Important Card */
.calc-card--urgent {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #f59e0b;
  border-width: 2px;
  border-left-width: 4px;
}

.calc-card--urgent:hover {
  border-color: #d97706;
}

.calc-card__tag--urgent {
  background: #fef3c7;
  color: #92400e;
}

/* Tips Section */
.tips-section {
  margin-top: 45px;
}

.tips-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 20px;
}

@media (min-width: 640px) {
  .tips-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tip-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  border-left: 3px solid #2d5016;
}

.tip-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #2d5016;
  margin: 0 0 8px 0;
}

.tip-card p {
  font-size: 0.9rem;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

/* Mobile optimizations */
@media (max-width: 480px) {
  .quick-start-box {
    padding: 14px 16px;
  }

  .section-heading {
    font-size: 1.3rem;
  }

  .calc-card {
    padding: 16px;
  }

  .calc-card__title {
    font-size: 1rem;
  }

  .calc-card__desc {
    font-size: 0.85rem;
  }
}

/* ===============================
   Peep Sight Calculator
================================ */

/* Hint text nudged up under its input */
.input-hint-tight {
  margin-top: -8px;
}

/* Calculator disclaimer note below the tool box */
.calculator-disclaimer {
  margin-top: 10px;
}

/* Bow setup flow callout (reusable step-list box) */
.bow-setup-callout {
  background: #f5f9f2;
  padding: 20px;
  border-radius: 8px;
  margin: 30px 0;
}

.bow-setup-callout p:first-child {
  margin: 0;
}

.bow-setup-callout ol {
  margin: 10px 0 0 20px;
  padding: 0;
}

.bow-setup-callout a {
  color: #2d5016;
  font-weight: 600;
}

/* ── Result block elements ── */

.calc-result__primary {
  font-size: 1.5rem;
  font-weight: 700;
  color: #2d5016;
  margin: 0 0 6px;
}

.calc-result__subtitle {
  font-size: 0.95rem;
  color: #555;
  margin: 0 0 14px;
}

.calc-result__table {
  margin: 0 0 16px;
}

.calc-result__peep-size {
  font-size: 1rem;
  color: #2d2d2d;
  margin: 0 0 8px;
}

.calc-result__warning {
  color: #b45309;
  font-size: 0.9rem;
}

.calc-result__next-steps {
  background: #f5f9f2;
  border-radius: 8px;
  padding: 14px;
  margin-top: 14px;
}

.calc-result__next-steps p {
  font-weight: 600;
  margin: 0 0 8px;
  color: #2d5016;
}

.calc-result__next-steps ol {
  margin: 0;
  padding-left: 20px;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.8;
}

.calc-result__footer-note {
  font-size: 0.85rem;
  color: #888;
  margin: 12px 0 0;
}

/* Hint with top spacing (e.g. below calculator grids) */
.hint--spaced {
  margin-top: 20px;
}

/* ===============================
   CONSOLIDATED RESULT LAYOUT CLASSES
   ───────────────────────────────────
   These replace the three separate blocks that previously
   existed for Shot Angle, Momentum, and Crossbow calculators.

   HOW TO APPLY:
   1. Delete the three sections currently in main.css:
        "Shot Angle Calculator" (everything from .shot-result-primary
          through the @media block at the end of that section)
        "Momentum Calculator"  (everything from .mom-result-primary
          through the @media block at the end of that section)
        "Crossbow Bolt Calculator" (everything from .cb-result-primary
          through the @media block at the end of that section)

   2. Paste this entire block in their place (once).

   NO HTML CHANGES NEEDED — all original class names are preserved.
   The comma-joined selectors apply identical rules to all three
   calculator result blocks simultaneously.
================================ */

/* ── Primary result header: flex row, space-between ── */
.shot-result-primary,
.mom-result-primary,
.cb-result-primary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e0e8d8;
}

/* ── Left column: flex column for label + value + sub ── */
.shot-result-main,
.mom-result-main,
.cb-result-main {
  display: flex;
  flex-direction: column;
}

/* ── Uppercase label above the main number ── */
/* Note: letter-spacing kept at 0.06em as the highest common value;
   visual difference from 0.05em is imperceptible at this font-size. */
.shot-result-label,
.mom-result-label,
.cb-result-label {
  font-size: 0.8rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Large primary number ──
   shot uses 2rem; mom + cb use 2.2rem — kept separate, not merged. ── */
.shot-result-value {
  font-size: 2rem;
  font-weight: 800;
  color: #2d5016;
  line-height: 1.1;
}

.mom-result-value,
.cb-result-value {
  font-size: 2.2rem;
  font-weight: 800;
  color: #2d5016;
  line-height: 1.1;
}

/* ── Subtitle / unit text below the number ── */
.shot-result-sub,
.mom-result-unit,
.cb-result-sub {
  font-size: 0.88rem;
  color: #777;
  margin-top: 2px;
}

/* ── Right column: badge + game/note text ── */
.shot-result-correction,
.mom-result-badges,
.cb-result-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* ── Small descriptive text beside the badge ── */
.mom-game-suit,
.cb-game-note {
  font-size: 0.82rem;
  color: #555;
  text-align: right;
  max-width: 180px;
}

/* shot-result-short is unique to shot angle — kept separate */
.shot-result-short {
  font-size: 0.9rem;
  font-weight: 600;
  color: #b45309;
}

/* ── Badge base styles shared by all three calculators ──
   Each calculator has its own colour variants defined below. ── */
.shot-angle-badge,
.mom-badge,
.cb-game-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ── Shot angle severity badge colour variants ── */
.badge--flat     { background: #e8f5e2; color: #2d5016; }
.badge--mild     { background: #fef9e7; color: #7d6008; }
.badge--moderate { background: #fef3cd; color: #856404; }
.badge--steep    { background: #fde8d0; color: #9a3412; }
.badge--extreme  { background: #fde8e8; color: #991b1b; }

/* ── Momentum badge colour variants ── */
.mom-badge--low      { background: #fde8e8; color: #991b1b; }
.mom-badge--moderate { background: #fef3cd; color: #856404; }
.mom-badge--good     { background: #e8f5e2; color: #2d5016; }
.mom-badge--high     { background: #d4edbc; color: #1a4010; }
.mom-badge--extreme  { background: #2d5016; color: #fff; }

/* ── Crossbow / draw-weight game badge colour variants ── */
.cb-badge--low    { background: #fde8e8; color: #991b1b; }
.cb-badge--turkey { background: #fef3cd; color: #856404; }
.cb-badge--deer   { background: #e8f5e2; color: #2d5016; }
.cb-badge--big    { background: #d4edbc; color: #1a4010; }
.cb-badge--large  { background: #2d5016; color: #fff;    }

/* ── Shot angle: height-to-angle helper (unique to shot angle) ── */
.shot-formula {
  background: #f5f9f2;
  border-left: 4px solid #2d5016;
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  font-size: 1.05rem;
  margin: 16px 0;
}

.shot-presets {
  margin-bottom: 20px;
}

.shot-presets__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  margin: 0 0 8px;
}

.shot-presets__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.shot-angle-preset {
  background: #fff;
  border: 1px solid #c8d8b8;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.82rem;
  color: #2d5016;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}

.shot-angle-preset:hover,
.shot-angle-preset.active {
  background: #2d5016;
  color: #fff;
  border-color: #2d5016;
}

.shot-height-helper {
  background: #f9fbf7;
  border: 1px solid #dce8d0;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 4px 0 16px;
}

.shot-height-helper__title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #2d5016;
  margin: 0 0 10px;
}

.shot-height-helper__inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.shot-height-helper__inputs label {
  font-size: 0.82rem;
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
}

.shot-height-helper__inputs input {
  width: 100%;
}

.shot-detail-table {
  width: 100%;
  margin-bottom: 20px;
}

.shot-ref-table-wrap {
  background: #f5f9f2;
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 4px;
}

.shot-ref-title {
  font-weight: 600;
  color: #2d5016;
  margin: 0 0 10px;
  font-size: 0.9rem;
}

.shot-ref-table {
  width: 100%;
  font-size: 0.88rem;
}

.shot-ref-row--active {
  background: #d4edbc;
  font-weight: 700;
}

/* ── Momentum: unique elements ── */
.mom-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.mom-tab {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid #c8d8b8;
  border-radius: 6px;
  background: #fff;
  color: #2d5016;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}

.mom-tab.active {
  background: #2d5016;
  color: #fff;
  border-color: #2d5016;
}

.mom-tab:hover:not(.active) {
  background: #f5f9f2;
}

.mom-setup-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: #2d5016;
  margin: 16px 0 4px;
  padding-top: 16px;
  border-top: 1px dashed #d4e3c7;
}

.mom-detail-table {
  width: 100%;
  margin-bottom: 16px;
}

.mom-grain-helper {
  background: #f5f9f2;
  border-left: 3px solid #2d5016;
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin: 12px 0;
}

.mom-grain-helper__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #2d5016;
  margin: 0 0 6px;
}

.mom-grain-helper__sub {
  font-size: 0.85rem;
  color: #555;
  margin: 0;
  line-height: 1.5;
}

.mom-compare-verdict {
  background: #f5f9f2;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 16px 0 12px;
  border-left: 4px solid #2d5016;
}

.mom-compare-verdict__title {
  font-weight: 700;
  color: #2d5016;
  margin: 0 0 6px;
  font-size: 0.95rem;
}

.mom-compare-verdict p {
  margin: 4px 0;
  font-size: 0.92rem;
}

.mom-delta--pos { color: #2d5016; font-weight: 700; }
.mom-delta--neg { color: #991b1b; font-weight: 700; }

.mom-compare-table {
  width: 100%;
  font-size: 0.88rem;
  margin-bottom: 12px;
}

/* ── Crossbow: unique elements ── */
.cb-muzzle-table {
  width: 100%;
  margin-bottom: 16px;
}

.cb-distance-table-wrap {
  background: #f5f9f2;
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 4px;
}

.cb-table-title {
  font-weight: 600;
  color: #2d5016;
  margin: 0 0 10px;
  font-size: 0.9rem;
}

.cb-distance-table {
  width: 100%;
  font-size: 0.85rem;
}

.cb-table-row--zero {
  background: #d4edbc;
  font-weight: 600;
}

.cb-rezero-note {
  border-radius: 8px;
  padding: 12px 14px;
  margin: 14px 0 0;
  font-size: 0.9rem;
}

.cb-rezero-note p { margin: 0; }
.cb-rezero-note--ok   { background: #e8f5e2; border-left: 3px solid #2d5016; }
.cb-rezero-note--warn { background: #fef3cd; border-left: 3px solid #d97706; }

.cb-scope-mismatch {
  border-radius: 8px;
  padding: 12px 14px;
  margin: 10px 0 0;
  font-size: 0.9rem;
}

.cb-scope-mismatch p { margin: 4px 0; }

.cb-scope-mismatch__title {
  font-weight: 700;
  margin: 0 0 6px !important;
}

.cb-scope-mismatch--ok   { background: #e8f5e2; border-left: 3px solid #2d5016; }
.cb-scope-mismatch--warn { background: #fde8d0; border-left: 3px solid #9a3412; }

/* ── Shared mobile overrides for all three result blocks ── */
@media (max-width: 480px) {

  .shot-result-primary,
  .mom-result-primary,
  .cb-result-primary {
    flex-direction: column;
  }

  .shot-result-correction,
  .mom-result-badges,
  .cb-result-right {
    align-items: flex-start;
  }

  .mom-game-suit,
  .cb-game-note {
    text-align: left;
    max-width: none;
  }

  /* shot stays at 2rem on mobile (already smaller than mom/cb) */
  .mom-result-value,
  .cb-result-value {
    font-size: 1.8rem;
  }

  .shot-result-value {
    font-size: 1.6rem;
  }

  .shot-height-helper__inputs {
    grid-template-columns: 1fr;
  }

  .shot-presets__buttons {
    flex-direction: column;
  }

  .cb-distance-table {
    font-size: 0.78rem;
  }
}

/* ===============================
   Paper Tuning Chart
================================ */

.calculator-form__section-label {
  font-weight: 600;
  margin: 16px 0 10px;
  color: #2d2d2d;
}

.tear-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}

@media (min-width: 480px) {
  .tear-grid { grid-template-columns: repeat(3, 1fr); }
}

.tear-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s ease;
  border-left: 3px solid transparent;
}

.tear-card:hover { border-left-color: #2d5016; background: #f5f9f2; }
.tear-card.selected { border-color: #2d5016; border-left-width: 3px; background: #f0f7eb; }
.tear-card__icon { font-size: 1.8rem; line-height: 1; margin-bottom: 6px; }
.tear-card__label { font-size: 0.82rem; font-weight: 700; color: #2d5016; margin-bottom: 3px; }
.tear-card__sub { font-size: 0.75rem; color: #888; line-height: 1.3; }
.tear-visual { width: 56px; height: 56px; margin: 0 auto 8px; }

.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #2d5016;
  color: #fff;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: 8px;
  flex-shrink: 0;
}

.step-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  font-size: 0.95rem;
  color: #333;
}

.diagnosis-fix__ol {
  margin: 0;
  padding-left: 18px;
  font-size: 0.92rem;
  color: #333;
  line-height: 1.8;
}

.diagnosis-warning {
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: #444;
  margin-top: 10px;
}

/* ===============================
   Stat Cards (trajectory calculator summary row)
================================ */

.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

@media (max-width: 400px) {
  .stat-cards { grid-template-columns: 1fr 1fr; }
}

.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
  border: 1px solid #e5e7eb;
}

.stat-card__label {
  font-size: 0.72rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.stat-card__value { font-size: 1.25rem; font-weight: 800; color: #2d5016; line-height: 1.1; }
.stat-card__unit  { font-size: 0.72rem; color: #999; margin-top: 2px; }

/* ===============================
   Sight Tape Calculator
================================ */

/* Tape wrap container */
.st-tape-wrap {
  margin: 16px 0;
}

/* Outer container holding track + legend side by side */
.st-tape-container {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* The vertical tape track */
.st-tape-track {
  position: relative;
  width: 56px;
  height: 280px;
  background: linear-gradient(180deg, #fff 0%, #f5f9f2 100%);
  border: 2px solid #2d5016;
  border-radius: 4px;
  flex-shrink: 0;
  overflow: visible;
}

/* Each distance mark on the tape */
.st-tape-mark {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
}

/* The yardage number */
.st-tape-dist {
  font-size: 0.72rem;
  font-weight: 700;
  color: #2d5016;
  width: 24px;
  text-align: right;
  padding-right: 4px;
  flex-shrink: 0;
  line-height: 1;
}

/* The tick line across the tape */
.st-tape-line {
  flex: 1;
  height: 1px;
  background: #2d5016;
}

/* Zero mark — thicker, highlighted */
.st-tape-mark--zero .st-tape-dist {
  color: #fff;
  background: #2d5016;
  border-radius: 2px;
  padding: 1px 4px;
}

.st-tape-mark--zero .st-tape-line {
  height: 2px;
  background: #2d5016;
}

/* Legend beside the tape */
.st-tape-legend {
  font-size: 0.78rem;
  color: #777;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  align-self: center;
  line-height: 1.2;
}

/* Mobile: stack tape below table on very small screens */
@media (max-width: 380px) {
  .st-tape-container {
    flex-direction: column;
  }
  .st-tape-track {
    width: 100%;
    height: 180px;
  }
  .st-tape-legend {
    writing-mode: horizontal-tb;
    transform: none;
  }
}

/* ===============================
   Bow Tuning Guide — New Classes
   Add these to the END of main.css
   (all class names are prefixed bt-
    to avoid any conflicts)
================================ */

/* ── Tuning sequence numbered steps ── */
.tuning-sequence {
  margin: 20px 0 30px;
  display: grid;
  gap: 12px;
}

.tuning-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  border-left: 3px solid #2d5016;
}

.tuning-step__number {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: #2d5016;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 1px;
}

.tuning-step__content {
  font-size: 0.93rem;
  color: #333;
  line-height: 1.5;
}

.tuning-step__content strong {
  display: block;
  color: #2d2d2d;
  font-weight: 700;
  margin-bottom: 3px;
}

.tuning-step__content span {
  color: #555;
  font-size: 0.9rem;
}

/* ── FEATURE 5: Seasonal context banners ── */
.bt-seasonal {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 20px;
}

.bt-seasonal a {
  font-weight: 600;
}

.bt-seasonal--preseason {
  background: #fff7e6;
  border-left: 4px solid #f59e0b;
  color: #444;
}
.bt-seasonal--preseason a { color: #b45309; }

.bt-seasonal--season {
  background: #f0f7eb;
  border-left: 4px solid #2d5016;
  color: #333;
}
.bt-seasonal--season a { color: #2d5016; }

.bt-seasonal--offseason {
  background: #eef4fb;
  border-left: 4px solid #3b82f6;
  color: #333;
}
.bt-seasonal--offseason a { color: #1d4ed8; }

.bt-seasonal--spring {
  background: #f0f7eb;
  border-left: 4px solid #4ade80;
  color: #333;
}
.bt-seasonal--spring a { color: #2d5016; }

/* ── FEATURE 2: Pre-flight checklist ── */
.bt-checklist {
  display: grid;
  gap: 10px;
  margin: 16px 0 14px;
}

.bt-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-weight: 400;   /* override global label bold */
  margin-bottom: 0;   /* override global label margin */
  color: #333;
  font-size: 0.93rem;
  line-height: 1.5;
}

.bt-check-input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #2d5016;
  cursor: pointer;
}

.bt-check-label {
  display: block;
}

.bt-check-item:has(.bt-check-input:checked) .bt-check-label {
  color: #2d5016;
  text-decoration: line-through;
  text-decoration-color: #aacf8a;
  opacity: 0.75;
}

/* Preflight status bar */
.bt-preflight-status {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 8px;
  transition: background 0.2s, border-color 0.2s;
}

.bt-preflight-status--incomplete {
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  color: #92400e;
}

.bt-preflight-status--partial {
  background: #e8f2fb;
  border-left: 3px solid #3b82f6;
  color: #1e40af;
}

.bt-preflight-status--complete {
  background: #f0f7eb;
  border-left: 3px solid #2d5016;
  color: #2d5016;
}

/* Helper links below status */
.bt-preflight-links {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 4px;
}

.bt-preflight-links a {
  color: #2d5016;
  font-weight: 600;
  text-decoration: none;
}

.bt-preflight-links a:hover {
  text-decoration: underline;
}

/* ── FEATURE 3: Adjustment history log ── */
.bt-log-entry-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  align-items: stretch;
}

.bt-log-input {
  flex: 1;
  padding: 11px 12px;
  font-size: 0.93rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-family: inherit;
}

.bt-log-input:focus {
  outline: none;
  border-color: #2d5016;
}

.bt-log-add-btn {
  flex-shrink: 0;
  padding: 11px 18px;
  font-size: 0.93rem;
  white-space: nowrap;
}

.bt-log-list {
  margin-bottom: 10px;
}

.bt-log-empty {
  color: #999;
  font-size: 0.88rem;
  font-style: italic;
  margin: 0;
  padding: 10px 0;
}

.bt-log-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.9rem;
}

.bt-log-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: #f5f9f2;
  color: #2d5016;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid #d4e3c7;
}

.bt-log-text {
  flex: 1;
  color: #333;
  line-height: 1.45;
}

.bt-log-time {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: #aaa;
}

.bt-log-del {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #bbb;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
}

.bt-log-del:hover {
  color: #991b1b;
}

/* Log footer actions */
.bt-log-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

.bt-log-note {
  font-size: 0.8rem;
  color: #aaa;
}

/* ── Contextual note boxes (used in JS output) ── */
.bt-note {
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.88rem;
  color: #444;
  line-height: 1.55;
}

.bt-note--info {
  background: #e8f2fb;
  border-left: 3px solid #3b82f6;
}

.bt-note--warning {
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
}

/* ── Mobile ── */
@media (max-width: 480px) {

  .tuning-step {
    padding: 12px 14px;
    gap: 10px;
  }

  .tuning-step__number {
    width: 24px;
    height: 24px;
    font-size: 0.78rem;
  }

  .tuning-step__content {
    font-size: 0.88rem;
  }

  .bt-log-entry-row {
    flex-direction: column;
  }

  .bt-log-add-btn {
    width: 100%;
    text-align: center;
  }

  .bt-log-row {
    flex-wrap: wrap;
    gap: 4px;
  }

  .bt-log-time {
    order: 3;
    flex-basis: 100%;
    padding-left: 28px;
  }
}

.bt-checklist--four {
  gap: 8px;
}

/* ===============================
   Broadhead Tuning Page — New Classes
   Add these to the END of main.css,
   after the existing bow-tuning-guide classes.

   Classes reused from existing main.css (no need to add):
   .tuning-sequence, .tuning-step, .tuning-step__number, .tuning-step__content
   .bt-checklist, .bt-check-item, .bt-check-input, .bt-check-label
   .bt-preflight-status (all 3 variants), .bt-preflight-links
   .bt-note, .bt-note--info, .bt-note--warning
   .bt-seasonal (all 4 variants)
   .bt-log-entry-row, .bt-log-input, .bt-log-add-btn
   .bt-log-list, .bt-log-empty, .bt-log-row, .bt-log-num,
   .bt-log-text, .bt-log-time, .bt-log-del
   .bt-log-actions, .bt-log-note
   .tips-grid, .tip-card
   .step-row, .step-badge
   .diagnosis-warning
   .result, .calculator-form, .hint, .faq, .authority
   .btn-primary, .btn-secondary
   .supplies-callout, .related-calculators, .tool-list
================================ */

/* ── FEATURE 5: Group offset tracker row (form inputs side by side) ── */
.bht-offset-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}

.bht-offset-label {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  color: #2d2d2d;
  margin-bottom: 0;   /* override global label margin */
}

.bht-offset-input {
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  font-size: 0.93rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
}

.bht-offset-input:focus {
  outline: none;
  border-color: #2d5016;
}

.bht-offset-select {
  width: 100%;
  margin-top: 5px;
  padding: 10px 36px 10px 12px;
  font-size: 0.93rem;
  font-family: inherit;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #555 50%),
    linear-gradient(135deg, #555 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.bht-offset-select:focus {
  outline: none;
  border-color: #2d5016;
}

.bht-offset-add-btn {
  padding: 10px 16px;
  font-size: 0.9rem;
  white-space: nowrap;
  align-self: end;
}

/* Offset readings table — reuses global table styles,
   just removes the card shadow to keep it inline */
.bht-offset-table {
  box-shadow: none;
  margin: 12px 0 0;
  font-size: 0.88rem;
}

.bht-offset-list {
  margin: 10px 0 4px;
}

/* Mobile: stack the offset form inputs */
@media (max-width: 480px) {
  .bht-offset-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .bht-offset-add-btn {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
  }
}

/* ===============================
   Target Panic Page — New Classes
   Add these to the END of main.css

   Reused from existing main.css (no additions needed):
   .tuning-sequence, .tuning-step, .tuning-step__number, .tuning-step__content
   .bt-seasonal (all variants)
   .bt-note, .bt-note--info, .bt-note--warning
   .bt-log-entry-row, .bt-log-input, .bt-log-add-btn
   .bt-log-list, .bt-log-empty, .bt-log-row, .bt-log-num,
   .bt-log-text, .bt-log-time, .bt-log-del
   .bt-log-actions, .bt-log-note
   .tips-grid, .tip-card
   .result, .calculator-form, .hint, .faq, .authority
   .btn-primary, .btn-secondary
   .supplies-callout, .related-calculators, .tool-list
================================ */

/* ── Protocol phase card ── */
.tp-phase {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.tp-phase__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: #f5f9f2;
  padding: 10px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.tp-phase__week {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2d5016;
  background: #d4edbc;
  padding: 2px 8px;
  border-radius: 4px;
}

.tp-phase__label {
  font-size: 0.95rem;
  font-weight: 700;
  color: #2d2d2d;
}

.tp-phase ul {
  padding: 10px 18px 6px 34px;
  margin: 0;
}

.tp-phase__ready {
  margin: 0;
  padding: 10px 16px;
  background: #fef9e7;
  border-top: 1px solid #e5e7eb;
  font-size: 0.85rem;
  color: #555;
  line-height: 1.5;
}

.tp-phase__ready strong {
  color: #856404;
}

/* Mobile */
@media (max-width: 480px) {
  .tp-phase__header {
    flex-direction: column;
    gap: 4px;
  }

  .tp-phase ul {
    padding-left: 28px;
  }
}

/* ===============================
   How to Grip a Bow Page — New Classes
   Add these to the END of main.css.

   Classes reused from existing main.css (no additions needed):
   .tuning-sequence, .tuning-step, .tuning-step__number, .tuning-step__content
   .tips-grid, .tip-card
   .calculator-form, .result, .hint
   .btn-primary, .btn-secondary
   .supplies-callout, .related-calculators, .tool-list, .tool-list__desc
   .faq, .authority
   table, thead, tbody, th, td  (global table styles)
================================ */

/* ── Grip checklist (five-point self-check) ── */
.grip-checklist {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.grip-check-item {
  padding: 11px 0;
  border-bottom: 1px solid #f0f0f0;
}

.grip-check-item:last-child {
  border-bottom: none;
}

.grip-check-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 400;   /* override global label bold */
  color: #2d2d2d;
  cursor: pointer;
  margin-bottom: 0;   /* override global label margin */
  line-height: 1.55;
  font-size: 0.93rem;
}

.grip-check-input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: #2d5016;
  cursor: pointer;
}

/* Checked state: dim the label text slightly to indicate done */
.grip-check-input:checked + span {
  color: #888;
  text-decoration: none;
}

.grip-check-input:checked + span strong {
  color: #2d5016;
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .grip-check-label {
    gap: 10px;
    font-size: 0.88rem;
  }

  .grip-check-input {
    width: 16px;
    height: 16px;
  }
}

/* ===============================
   Best Hunting Arrows Page
   Add this block to the END of main.css.

   NOTE: This page reuses the following existing classes
   from main.css — no changes needed to those:
     .calculator-form, .result, .hint, .hub-link
     .tips-grid, .tip-card
     .tuning-sequence, .tuning-step, .tuning-step__number, .tuning-step__content
     .supplies-callout
     .related-calculators, .tool-list, .tool-list__desc
     .faq, .authority
     .bt-note, .bt-note--info, .bt-note--warning
     table, thead, tbody, th, td (global table styles)

   Only the two classes below are new.
================================ */

/* ── Hunting arrow result: two-column metric grid ──
   Used in the JS-generated result block to display
   weight target and FOC side by side.
   The grid is written inline in the JS output for
   maximum compatibility — this rule is a fallback
   for any future static use of the same pattern.
   No action needed here unless you add a static
   version of the metric pair outside the JS output.
─────────────────────────────────────────────────── */

.ha-metric-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e0e8d8;
}

.ha-metric-pair__item {
  display: flex;
  flex-direction: column;
}

.ha-metric-pair__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  margin-bottom: 2px;
}

.ha-metric-pair__value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #2d5016;
  line-height: 1.15;
}

.ha-metric-pair__sub {
  font-size: 0.8rem;
  color: #777;
  margin-top: 3px;
}

/* Mobile: stack on very small screens */
@media (max-width: 360px) {
  .ha-metric-pair {
    grid-template-columns: 1fr;
  }
}

/* ===============================
   Fixed Blade vs Mechanical Broadhead Guide
   Add this block to the END of main.css.

   Classes reused from existing main.css (no changes needed):
     .calculator-form, .result, .hint, .hub-link
     .tips-grid, .tip-card
     .tuning-sequence, .tuning-step, .tuning-step__number, .tuning-step__content
     .supplies-callout
     .related-calculators, .tool-list, .tool-list__desc
     .faq, .authority
     .bt-note, .bt-note--info, .bt-note--warning
     table, thead, tbody, th, td (global table styles)

   New classes below are prefixed bhd- to avoid conflicts.
================================ */

/* ── Verdict result box ──────────────────────────────────────────── */
.bhd-verdict {
  padding: 16px 20px;
  border-radius: 10px;
  margin-bottom: 4px;
}

.bhd-verdict__label {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
}

.bhd-verdict__text {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
}

/* Verdict colour variants */
.bhd-verdict--fixed {
  background: #f0f7eb;
  border-left: 5px solid #2d5016;
  color: #1a4010;
}

.bhd-verdict--lean-fixed {
  background: #f5f9f2;
  border-left: 5px solid #3d6b1f;
  color: #2d5016;
}

.bhd-verdict--border {
  background: #fef9e7;
  border-left: 5px solid #f59e0b;
  color: #7d6008;
}

.bhd-verdict--lean-mech {
  background: #fef3cd;
  border-left: 5px solid #d97706;
  color: #92400e;
}

.bhd-verdict--mech {
  background: #e8f2fb;
  border-left: 5px solid #3b82f6;
  color: #1e3a5f;
}

/* ── Speed table: below-threshold cell highlight ─────────────────── */
/* Applied to table cells in the speed decay reference table */
td.bhd-below {
  color: #b45309;
  font-weight: 700;
  background: #fef3c7;
}

/* Mobile */
@media (max-width: 480px) {
  .bhd-verdict {
    padding: 14px 16px;
  }

  .bhd-verdict__text {
    font-size: 1.1rem;
  }
}

/* ===============================
   PIN GAP CALCULATOR PAGE
   /how-to-sight-in-a-compound-bow
   
   All classes here are new — they do not
   conflict with any existing main.css class.
   Add this block to the END of main.css.
   
   Classes re-used from existing main.css
   (no changes needed to those):
     .calculator-form, .calculator-result
     .tooltip (hover hints)
     .tuning-sequence, .tuning-step, .tuning-step__number, .tuning-step__content
     .tips-grid, .tip-card
     .shot-formula
     .supplies-callout
     .related-calculators, .tool-list, .tool-list__desc
     .bow-setup-callout
     .faq, .authority
     .bt-note, .bt-note--info, .bt-note--warning
     .cb-result-primary, .cb-result-main, .cb-result-label,
     .cb-result-value, .cb-result-sub, .cb-result-right
     .cb-game-badge, .cb-badge--deer
     .cb-distance-table-wrap, .cb-distance-table, .cb-table-title
     .cb-table-row--zero
     .calc-result__next-steps, .calc-result__footer-note
     .muted
     table, thead, tbody, th, td  (global table styles)
     .primary-tool__label
================================ */

/* ── Pin distance inputs: compact centred number fields ── */
.pg-pin-dist {
  width: 100%;
  padding: 10px 6px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  color: #2d5016;
  font-family: inherit;
  transition: border-color 0.15s;
}

.pg-pin-dist:focus {
  outline: none;
  border-color: #2d5016;
  background: #f5f9f2;
}

/* ── Pin label row above inputs ── */
.pg-pin-label {
  display: block;
  font-size: 0.75rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 4px;
  font-weight: 600;
}

/* ── Mobile: stack pin inputs into 3-column grid ── */
@media (max-width: 480px) {
  #pgPinInputs {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  #pgPinInputs > label:nth-child(4),
  #pgPinInputs > label:nth-child(5) {
    grid-column: span 1;
  }

  .pg-pin-dist {
    font-size: 0.9rem;
    padding: 8px 4px;
  }
}

@media (max-width: 360px) {
  #pgPinInputs {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ===============================
   ARROW FLETCHING GUIDE PAGE
   /arrow-fletching-guide

   All classes here are new — no conflicts
   with existing main.css classes.
   Add this block to the END of main.css.

   Classes reused from existing main.css
   (no changes needed to those):
     .primary-tool, .primary-tool__label, .primary-tool__description
     .calculator-form, .calculator-result
     .tooltip
     .tuning-sequence, .tuning-step, .tuning-step__number, .tuning-step__content
     .bow-setup-callout
     .supplies-callout
     .calculator-grid, .calc-card, .calc-card__icon,
       .calc-card__title, .calc-card__desc
     .related-calculators, .tool-list, .tool-list__desc
     .faq, .authority
     .bt-note, .bt-note--info, .bt-note--warning
     .cb-result-primary, .cb-result-main, .cb-result-label,
       .cb-result-value, .cb-result-sub, .cb-result-right
     .cb-game-badge, .cb-badge--deer, .cb-badge--turkey, .cb-badge--low
     .cb-muzzle-table
     .shot-angle-badge, .badge--flat, .badge--mild, .badge--steep
     .calc-result__next-steps, .calc-result__footer-note
     .muted, .hint, .hint--spaced
     table, thead, tbody, th, td (global table styles)
================================ */

/* ── Vane Selector result header block ── */
.vane-result__header {
  display: flex;
  flex-direction: column;
  margin-bottom: 4px;
}

.vane-result__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 4px;
}

.vane-result__primary {
  font-size: 1.35rem;
  font-weight: 800;
  color: #2d5016;
  line-height: 1.2;
  margin-bottom: 4px;
}

.vane-result__sub {
  font-size: 0.88rem;
  color: #777;
}

/* Mobile */
@media (max-width: 480px) {
  .vane-result__primary {
    font-size: 1.1rem;
  }
}

/* ===============================
   D LOOP GUIDE PAGE
   /how-to-tie-a-d-loop

   Add this block to the END of main.css.

   Classes reused from existing main.css (no additions needed):
     .hub-link, .hint, .hero, .intro
     .primary-tool, .primary-tool__label
     .calculator-form, .calculator-result, .calculator-disclaimer
     .tuning-sequence, .tuning-step, .tuning-step__number, .tuning-step__content
     .tips-grid, .tip-card
     .bow-setup-callout
     .supplies-callout
     .related-calculators, .tool-list, .tool-list__desc
     .bt-note, .bt-note--info, .bt-note--warning
     .faq, .authority
     .muted
     table, thead, tbody, th, td  (global table styles)
================================ */

/* ── Kit grid: what you need before you start ── */
.dloop-kit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}

@media (min-width: 480px) {
  .dloop-kit-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.dloop-kit-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-left: 3px solid #2d5016;
}

.dloop-kit-icon {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 2px;
}

.dloop-kit-item strong {
  font-size: 0.88rem;
  color: #2d2d2d;
  font-weight: 700;
  line-height: 1.3;
}

.dloop-kit-item span {
  font-size: 0.78rem;
  color: #777;
  line-height: 1.4;
}

/* ── Calculator result layout ── */
.dloop-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e0e8d8;
}

@media (max-width: 360px) {
  .dloop-result-grid {
    grid-template-columns: 1fr;
  }
}

.dloop-result-block {
  display: flex;
  flex-direction: column;
}

.dloop-result-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  margin: 0 0 2px;
}

.dloop-result-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: #2d5016;
  line-height: 1.2;
  margin: 0 0 2px;
}

.dloop-result-sub {
  font-size: 0.78rem;
  color: #777;
  margin: 0;
}

/* ── Setup steps summary block ── */
.dloop-result-steps {
  background: #f5f9f2;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

/* ── Draw length correction callout ── */
.dloop-result-correction {
  background: #fef9e7;
  border-left: 4px solid #f59e0b;
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
  margin: 14px 0;
}

.dloop-correction-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #92400e;
  margin: 0 0 4px;
}

.dloop-correction-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: #b45309;
  margin: 0 0 4px;
  line-height: 1.1;
}

/* ── Mobile tweaks ── */
@media (max-width: 480px) {
  .dloop-kit-grid {
    grid-template-columns: 1fr 1fr;
  }

  .dloop-result-value {
    font-size: 1.1rem;
  }

  .dloop-correction-value {
    font-size: 1.3rem;
  }
}