/* ==========================================================================
   Before You Borrow — local build stylesheet

   Design tokens below are lifted from goalpostfinance.com/styles.css so the
   local build already looks like Goalpost. When this moves into the main site,
   delete the :root block and let the site stylesheet supply these values —
   every variable name here matches the one the site already defines.

   Deliberate choices, per spec §10:
     - Mobile-first, one primary question per screen
     - Large touch targets, minimal typing
     - No approval meters, gauges, countdowns, or red danger screens
     - Focus is always visible; nothing is signalled by color alone
   ========================================================================== */

:root {
  /* --- inherited from goalpostfinance.com --- */
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #60a5fa;
  --secondary: #10b981;
  --secondary-dark: #059669;
  --green-text: #047857;
  --danger: #ef4444;
  --warning: #f59e0b;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow: 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 3px 8px -2px rgba(15, 23, 42, .07);
  --shadow-lg: 0 8px 20px -6px rgba(15, 23, 42, .09);
  --radius-lg: 16px;
  --transition: all .3s cubic-bezier(.4, 0, .2, 1);

  /* --- local to this tool --- */
  --byb-ink: var(--gray-900);
  --byb-muted: var(--gray-600);
  --byb-line: var(--gray-200);
  --byb-surface: #fff;
  --byb-tint: var(--gray-50);
  --byb-accent-soft: rgba(37, 99, 235, .07);
  --byb-radius: 14px;
  --byb-gutter: 1.25rem;
  --byb-touch: 52px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--byb-ink);
  background: var(--byb-tint);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.byb-shell { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 var(--byb-gutter); }
.byb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- local-build banner: impossible to mistake this for production --- */
.byb-devbar {
  background: #1f2937; color: #e5e7eb; font-size: .8125rem;
  padding: .5rem var(--byb-gutter); text-align: center;
}
.byb-devbar strong { color: #fbbf24; }

/* --- masthead --- */
.byb-masthead { background: var(--byb-surface); border-bottom: 1px solid var(--byb-line); padding: 2rem 0 1.75rem; }
.byb-brand { margin: 0 0 .25rem; font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; color: var(--primary); font-weight: 600; }
.byb-title { font-family: var(--font-heading); font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.15; margin: 0 0 .625rem; }
.byb-subtitle { margin: 0; color: var(--byb-muted); font-size: 1rem; max-width: 56ch; }

main.byb-shell { padding-top: 1.5rem; padding-bottom: 3rem; }

/* --- progress: conceptual stages, never "question 7 of 31" --- */
.byb-progress { margin: 0 0 1.25rem; }
.byb-progress__list { display: flex; gap: .375rem; list-style: none; margin: 0; padding: 0; }
.byb-progress__step { flex: 1; display: flex; flex-direction: column; gap: .375rem; font-size: .6875rem; color: var(--gray-400); }
.byb-progress__dot { height: 4px; border-radius: 999px; background: var(--gray-200); }
.byb-progress__step.is-done .byb-progress__dot { background: var(--secondary); }
.byb-progress__step.is-current .byb-progress__dot { background: var(--primary); }
.byb-progress__step.is-current { color: var(--primary); font-weight: 600; }
.byb-progress__step.is-done { color: var(--green-text); }
.byb-progress__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- card --- */
.byb-stage:focus { outline: none; }
.byb-card {
  background: var(--byb-surface); border: 1px solid var(--byb-line);
  border-radius: var(--radius-lg); padding: 1.5rem var(--byb-gutter) 1.25rem;
  box-shadow: var(--shadow-md);
}
.byb-card--intervention { border-left: 4px solid var(--warning); }
.byb-h2 { font-family: var(--font-heading); font-size: clamp(1.25rem, 4.5vw, 1.625rem); line-height: 1.25; margin: 0 0 .625rem; }
.byb-lede { color: var(--byb-muted); margin: 0 0 1.25rem; font-size: .9375rem; }
.byb-fineprint { color: var(--gray-500); font-size: .8125rem; margin: 1.25rem 0 0; }
.byb-meta { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .375rem; }
.byb-meta li { position: relative; padding-left: 1.25rem; font-size: .875rem; color: var(--byb-muted); }
.byb-meta li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--secondary); }

/* --- choices --- */
.byb-options { display: grid; gap: .5rem; }
.byb-options--grid { gap: .5rem; }

.byb-choice {
  display: flex; flex-direction: column; gap: .125rem; width: 100%;
  min-height: var(--byb-touch); padding: .875rem 1rem; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  background: var(--byb-surface); border: 1.5px solid var(--byb-line);
  border-radius: var(--byb-radius); transition: var(--transition);
}
.byb-choice:hover { border-color: var(--primary-light); background: var(--byb-accent-soft); }
.byb-choice__title { font-weight: 600; }
.byb-choice__sub { font-size: .8125rem; color: var(--byb-muted); }

.byb-field { border: 0; padding: 0; margin: 0 0 1.75rem; }
.byb-field--plain { margin-bottom: 1rem; }
.byb-field__label { display: flex; align-items: baseline; gap: .5rem; padding: 0; font-weight: 600; font-size: 1rem; margin-bottom: .375rem; }
.byb-optional { font-size: .75rem; font-weight: 500; color: var(--gray-400); }
.byb-field__help { margin: 0 0 .75rem; font-size: .8125rem; color: var(--byb-muted); }
.byb-field__error { margin: .5rem 0 0; font-size: .8125rem; font-weight: 600; color: var(--danger); }
/* not signalled by color alone */
.byb-field__error::before { content: "! "; }

.byb-option {
  display: flex; align-items: flex-start; gap: .75rem;
  min-height: var(--byb-touch); padding: .8125rem 1rem; cursor: pointer;
  background: var(--byb-surface); border: 1.5px solid var(--byb-line);
  border-radius: var(--byb-radius); transition: var(--transition);
}
.byb-option:hover { border-color: var(--primary-light); }
.byb-option__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.byb-option__box {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: .15rem;
  border: 2px solid var(--gray-300); border-radius: 50%; transition: var(--transition);
}
.byb-option--check .byb-option__box { border-radius: 5px; }
.byb-option__input:checked ~ .byb-option__box {
  border-color: var(--primary); background: var(--primary);
  box-shadow: inset 0 0 0 3px var(--byb-surface);
}
.byb-option--check .byb-option__input:checked ~ .byb-option__box { box-shadow: inset 0 0 0 2px var(--byb-surface); }
.byb-option:has(.byb-option__input:checked) { border-color: var(--primary); background: var(--byb-accent-soft); }
.byb-option:has(.byb-option__input:focus-visible) { outline: 3px solid var(--primary-light); outline-offset: 2px; }
.byb-option__text { display: flex; flex-direction: column; gap: .125rem; }
.byb-option__label { font-size: .9375rem; }
.byb-option__hint { font-size: .8125rem; color: var(--byb-muted); }

/* --- numeric inputs --- */
.byb-numeric { display: grid; gap: .625rem; }
.byb-input-wrap { display: flex; align-items: center; border: 1.5px solid var(--gray-300); border-radius: var(--byb-radius); background: var(--byb-surface); overflow: hidden; }
.byb-input-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--byb-accent-soft); }
.byb-affix { padding: 0 .5rem 0 .875rem; color: var(--gray-500); font-weight: 600; }
.byb-affix--suffix { padding: 0 .875rem 0 .5rem; }
.byb-input {
  flex: 1; min-height: var(--byb-touch); width: 100%;
  border: 0; padding: .75rem .875rem; font: inherit; font-size: 1.0625rem; background: transparent;
}
.byb-input:focus { outline: none; }
.byb-field--plain .byb-input { border: 1.5px solid var(--gray-300); border-radius: var(--byb-radius); }
.byb-field--plain .byb-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--byb-accent-soft); }
.byb-textarea { min-height: 84px; padding: .75rem .875rem; resize: vertical; }
.byb-unknown { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--byb-muted); cursor: pointer; min-height: 40px; }
.byb-unknown input { width: 18px; height: 18px; accent-color: var(--primary); }

/* --- glossary disclosure --- */
.byb-glossary { margin-top: .75rem; border-left: 3px solid var(--byb-line); padding-left: .75rem; }
.byb-glossary summary { cursor: pointer; font-size: .8125rem; font-weight: 600; color: var(--primary); min-height: 32px; display: flex; align-items: center; }
.byb-glossary p { margin: .375rem 0 0; font-size: .8125rem; color: var(--byb-muted); }

/* --- navigation --- */
.byb-nav { display: flex; gap: .625rem; margin-top: 1.5rem; }
.byb-nav--stack { flex-direction: column; }
.byb-btn {
  flex: 1; min-height: var(--byb-touch); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .125rem;
  padding: .75rem 1.25rem; font: inherit; font-weight: 600; cursor: pointer;
  border-radius: var(--byb-radius); border: 1.5px solid transparent; transition: var(--transition);
}
.byb-btn--primary { background: var(--primary); color: #fff; }
.byb-btn--primary:hover { background: var(--primary-dark); }
.byb-btn--secondary { background: var(--byb-surface); color: var(--primary); border-color: var(--primary); }
.byb-btn--secondary:hover { background: var(--byb-accent-soft); }
.byb-btn--ghost { background: transparent; color: var(--byb-muted); border-color: var(--byb-line); flex: 0 0 auto; }
.byb-btn--ghost:hover { background: var(--gray-100); }
.byb-btn:focus-visible, .byb-choice:focus-visible, .byb-link-btn:focus-visible { outline: 3px solid var(--primary-light); outline-offset: 2px; }
.byb-btn__sub { font-size: .75rem; font-weight: 400; opacity: .85; }
.byb-btn[disabled] { opacity: .6; cursor: not-allowed; }

/* --- result --- */
.byb-result { display: grid; gap: 1.25rem; }
.byb-result__header { background: var(--byb-surface); border: 1px solid var(--byb-line); border-top: 4px solid var(--primary); border-radius: var(--radius-lg); padding: 1.5rem var(--byb-gutter); box-shadow: var(--shadow-md); }
.byb-result__eyebrow { margin: 0 0 .25rem; font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; color: var(--primary); font-weight: 600; }
.byb-result__title { font-family: var(--font-heading); font-size: clamp(1.375rem, 5vw, 1.875rem); line-height: 1.2; margin: 0 0 .75rem; }
.byb-result__short { margin: 0; font-size: 1.0625rem; line-height: 1.65; }
.byb-result__section { background: var(--byb-surface); border: 1px solid var(--byb-line); border-radius: var(--radius-lg); padding: 1.25rem var(--byb-gutter); box-shadow: var(--shadow-sm); }
.byb-result__heading { font-size: 1.0625rem; margin: 0 0 .875rem; }
.byb-result__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.byb-result__item { display: flex; gap: .75rem; }
.byb-result__marker { flex: 0 0 auto; width: 8px; height: 8px; margin-top: .5rem; border-radius: 50%; background: var(--gray-300); }
.byb-result__section.is-helpful .byb-result__marker { background: var(--secondary); }
.byb-result__section.is-concern .byb-result__marker { background: var(--warning); }
.byb-result__item.is-serious .byb-result__marker { background: var(--danger); }
.byb-result__item-title { margin: 0 0 .25rem; font-weight: 600; }
.byb-result__item-body { margin: 0; font-size: .9375rem; color: var(--byb-muted); }
.byb-result__empty { margin: 0; font-size: .9375rem; color: var(--byb-muted); font-style: italic; }
.byb-result__fineprint { margin: .875rem 0 0; font-size: .75rem; color: var(--gray-500); }
.byb-result__disclaimer { margin: 0; font-size: .75rem; color: var(--gray-500); text-align: center; padding: 0 .5rem; }

.byb-callout { background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--byb-radius); padding: .875rem 1rem; }
.byb-callout p { margin: 0; font-size: .875rem; }

.byb-numbers-table { width: 100%; border-collapse: collapse; }
.byb-numbers-table th, .byb-numbers-table td { text-align: left; padding: .625rem 0; border-bottom: 1px solid var(--gray-100); vertical-align: top; font-weight: 400; }
.byb-numbers-table td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; padding-left: .75rem; }
.byb-numbers-table tr.is-emphasis td { color: var(--primary); }
.byb-numbers-table tr.is-emphasis th { font-weight: 600; }
.byb-numbers-table__note { display: block; font-size: .75rem; color: var(--gray-500); }

.byb-option-cards { display: grid; gap: .75rem; }
.byb-option-card { border: 1px solid var(--byb-line); border-radius: var(--byb-radius); padding: .875rem 1rem; background: var(--gray-50); }
.byb-option-card__title { margin: 0 0 .25rem; font-weight: 600; font-size: .9375rem; }
.byb-option-card__body { margin: 0; font-size: .875rem; color: var(--byb-muted); }
.byb-link-btn { margin-top: .5rem; padding: .375rem 0; background: none; border: 0; color: var(--primary); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; min-height: 36px; }

.byb-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.byb-checklist__item { display: flex; gap: .75rem; align-items: flex-start; }
.byb-checklist__box { width: 22px; height: 22px; margin-top: .1rem; flex: 0 0 auto; accent-color: var(--secondary); cursor: pointer; }
.byb-checklist label { cursor: pointer; }
.byb-checklist__title { display: block; font-weight: 600; font-size: .9375rem; }
.byb-checklist__body { display: block; font-size: .875rem; color: var(--byb-muted); }
.byb-checklist__box:checked + label .byb-checklist__title { text-decoration: line-through; color: var(--gray-400); }

.byb-conversion { background: var(--byb-surface); border: 1px solid var(--primary-light); border-radius: var(--radius-lg); padding: 1.5rem var(--byb-gutter); box-shadow: var(--shadow-md); }
.byb-conversion__heading { font-family: var(--font-heading); font-size: 1.25rem; margin: 0 0 .5rem; }
.byb-conversion__body { margin: 0 0 1.25rem; font-size: .9375rem; color: var(--byb-muted); }
.byb-conversion__actions { display: grid; gap: .625rem; }
.byb-result__footer-actions { display: flex; gap: .625rem; justify-content: center; flex-wrap: wrap; }
.byb-result__footer-actions .byb-btn { flex: 0 1 auto; }

/* --- lead dialog --- */
.byb-modal { position: fixed; inset: 0; z-index: 100; background: rgba(17, 24, 39, .55); display: flex; align-items: flex-end; justify-content: center; padding: 1rem; overflow-y: auto; }
.byb-modal__panel { background: var(--byb-surface); border-radius: var(--radius-lg); padding: 1.5rem var(--byb-gutter); width: 100%; max-width: 480px; box-shadow: var(--shadow-lg); }
.byb-form__status { margin: .5rem 0 0; font-size: .875rem; color: var(--byb-muted); }
.byb-form__status.is-error { color: var(--danger); font-weight: 600; }
body.byb-modal-open { overflow: hidden; }

/* --- footer --- */
.byb-footer { border-top: 1px solid var(--byb-line); background: var(--byb-surface); padding: 1.5rem 0 2.5rem; }
.byb-footer p { margin: 0 0 .375rem; font-size: .75rem; color: var(--gray-500); }
.byb-footer__meta { color: var(--gray-400); }

/* --- desktop --- */
@media (min-width: 640px) {
  :root { --byb-gutter: 2rem; }
  .byb-modal { align-items: center; }
  .byb-conversion__actions { grid-template-columns: 1fr 1fr; }
  .byb-progress__step { font-size: .75rem; }
}

/* --- respect user preferences --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* --- print: the result should save cleanly as a PDF --- */
@media print {
  .byb-devbar, .byb-progress, .byb-conversion, .byb-result__footer-actions, .byb-masthead .byb-subtitle { display: none !important; }
  body { background: #fff; }
  .byb-result__section, .byb-result__header { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

/* ── Site link bar (production shell) ─────────────────────────────── */
.byb-sitebar{background:#fff;border-bottom:1px solid #e2e8f0;padding:.65rem 0}
.byb-sitebar__row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.byb-sitebar__brand{font-weight:700;color:#0f172a;text-decoration:none;font-size:1rem}
.byb-sitebar__brand:hover{color:#2563eb}
.byb-sitebar__links{display:flex;align-items:center;gap:1.1rem}
.byb-sitebar__links a{color:#475569;text-decoration:none;font-size:.9rem;font-weight:500}
.byb-sitebar__links a:hover{color:#2563eb}
.byb-sitebar__cta{background:#2563eb;color:#fff!important;padding:.45rem .9rem;border-radius:8px;font-weight:600!important}
.byb-sitebar__cta:hover{background:#1d4ed8;color:#fff!important}
@media (max-width:560px){.byb-sitebar__links a:not(.byb-sitebar__cta){display:none}}