/* threadbaire.css — v0.3.7
   - Consolidated duplicates (anchor offsets, hero helpers, grid)
   - Kept all existing visual language; no layout shifts
   - Small a11y polish for Pilot radios (accent color + spacing)
*/

/* ================ Tokens ================ */
:root{
  /* Brand */
  --tb-green:      #00a551;   /* primary brand */
  --tb-green-600:  #007c40;   /* darker (AA-safe for text on white) */
  --tb-green-50:   #e8f6ef;   /* subtle bg */

  /* Neutrals */
  --tb-gray-600:   #4b5563;
  --tb-border:     #d1d5db;

  /* Radii & motion */
  --tb-radius:     .5rem;
  --tb-trans:      .2s ease;

  /* Cards + focus */
  --tb-shadow-card:       0 1px 1px rgba(17,24,39,.05), 0 0 0 1px rgba(17,24,39,.04);
  --tb-shadow-card-hover: 0 6px 14px rgba(17,24,39,.08), 0 0 0 1px rgba(17,24,39,.05);
  --tb-border-soft:       rgba(17,24,39,.12);
  --tb-focus:             var(--tb-green);
  --tb-focus-outline:     3px;
}

/* Optional smooth anchor scroll */
html { scroll-behavior: smooth; }

/* ================ Brand link utilities ================ */
.text-brand       { color: var(--tb-green-600); }
.bg-brand         { background-color: var(--tb-green); }
.bg-brand-50      { background-color: var(--tb-green-50); }
.border-brand     { border-color: var(--tb-green); }
.focus-brand      { outline:2px solid var(--tb-green); outline-offset:2px; }

.link-brand{
  color: var(--tb-green-600);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: transparent;
  transition: color var(--tb-trans), text-decoration-color var(--tb-trans);
}
.link-brand:hover,
.link-brand:focus-visible{
  color: var(--tb-green);
  text-decoration-color: currentColor; outline: none;
}
.link-brand:visited{ color: var(--tb-green-600); }

.link-ghost{
  color: var(--tb-gray-600);
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: transparent;
  transition: color var(--tb-trans), text-decoration-color var(--tb-trans);
}
.link-ghost:hover,
.link-ghost:focus-visible{
  color: var(--tb-green-600);
  text-decoration-color: currentColor; outline: none;
}

/* ================ Buttons ================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: var(--tb-radius);
  padding:.5rem 1rem;
  font-weight:600; line-height:1.2;
  gap:.375rem; white-space:nowrap;
  text-decoration:none;
  transition: background-color var(--tb-trans), color var(--tb-trans), border-color var(--tb-trans), transform var(--tb-trans);
}
.btn svg{ display:inline-block; flex:0 0 auto; }

.btn-primary{
  background-color: var(--tb-green, #00a551);
  color:#fff;
  border: none;
}
.btn-primary:hover{ background-color:#00964b; }

/* Darker variant for smaller text on green */
.btn-a11y{ background-color: var(--tb-green-600, #007c40); color:#fff; }
.btn-a11y:hover{ filter: brightness(0.95); }

.btn-secondary{
  background:#fff;
  color: var(--tb-green-600, #007c40);
  border:1px solid var(--tb-border, #d1d5db);
}
.btn-secondary:hover{ background: var(--tb-green-50, #e8f6ef); }

/* Sizes */
.btn-lg{ font-size:1.125rem; }  /* 18px */
.btn-sm{ font-size:.9375rem; }  /* 15px */

/* Focus ring (fallback + modern) */
.btn:focus-visible,
header a:focus-visible,
footer a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 var(--tb-focus-outline, 3px) rgba(0,165,81,.35);
}
@supports (color: color-mix(in srgb, white, black)){
  .btn:focus-visible,
  header a:focus-visible,
  footer a:focus-visible{
    box-shadow: 0 0 0 var(--tb-focus-outline, 3px) color-mix(in srgb, var(--tb-focus) 35%, transparent);
  }
}

/* ================ Cards (declutter) ================ */
.rounded-xl.border.bg-white.shadow-sm{
  border-color: var(--tb-border-soft) !important;
  box-shadow: var(--tb-shadow-card) !important;
  transition: transform var(--tb-trans), box-shadow var(--tb-trans);
}
.rounded-xl.border.bg-white.shadow-sm:hover{
  transform: translateY(-1px);
  box-shadow: var(--tb-shadow-card-hover) !important;
}
@media (prefers-reduced-motion: reduce){
  .rounded-xl.border.bg-white.shadow-sm:hover{ transform:none; }
}

/* Glossary terms */
.term{
  border-color: var(--tb-border-soft);
  box-shadow: var(--tb-shadow-card);
  transition: transform var(--tb-trans), box-shadow var(--tb-trans), background-color var(--tb-trans);
}
.term:hover{
  background-color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--tb-shadow-card-hover);
}
.term h3{ font-size: 1.0625rem; line-height: 1.35; }
.term p{ color:#374151; }
.term p a{ text-underline-offset: 3px; text-decoration-thickness: .06em; }

/* Sticky-header anchor offset for glossary */
.term { scroll-margin-top: 5.5rem; }
@media (max-width: 640px){
  .term { scroll-margin-top: 6.25rem; } /* a bit more space on mobile */
}


/* Highlight chip */
.mark, mark{
  background: color-mix(in srgb, var(--tb-green) 18%, transparent);
  padding:.05rem .25rem; border-radius:.25rem;
}

/* Subtle section separators only when stacks are tight */
section + section .mx-auto{ position: relative; }
section + section .mx-auto::before{
  content:""; position:absolute; left:0; right:0; top:-1.25rem;
  height:1px; background: linear-gradient(to right, transparent, rgba(17,24,39,.06), transparent);
}

/* ================ CTA safety net (kept) ================ */
.btn{ display:inline-flex !important; text-decoration:none !important; }
.btn-primary{ background-color: var(--tb-green, #00a551) !important; color:#fff !important; }
.btn-secondary{
  background:#fff !important;
  color: var(--tb-green-600, #007c40) !important;
  border:1px solid var(--tb-border, #d1d5db) !important;
}

/* --- Playbook pill nav (Threadbaire colors) --- */
.pill{
  --pill-bg: #fff;
  --pill-text: var(--tb-green-600);
  --pill-border: var(--tb-border);
  --pill-hover-bg: var(--tb-green-50);
  --pill-brand: var(--tb-green);
}
.pill a{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem 1rem;
  border:1px solid var(--pill-border);
  border-radius:9999px;
  background:var(--pill-bg);
  color:#111827;
  font-weight:600;
  line-height:1;
  letter-spacing:.01em;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s,transform .05s;
}
.pill a:hover{
  background:var(--pill-hover-bg);
  border-color: var(--pill-brand);
  color: var(--pill-text);
  transform:translateY(-1px);
}
.pill a:focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--pill-brand) 25%, transparent);
}
.pill a.is-active{
  background:var(--pill-brand);
  border-color: var(--pill-brand);
  color:#fff;
}
.pill a::after{ content:"›"; margin-left:.4rem; font-size:1rem; line-height:1; opacity:.55; }
.pill a:hover::after{ opacity:.75; }
.pill a.is-active::after{ opacity:.9; }

/* ============================================================
   v0.2.8–0.3.0 → consolidated (home + glossary)
   ============================================================ */

/* Section rhythm + readable line-length */
.section { padding: 3.5rem 0; }
.prose-narrow { max-width: 72ch; }

/* Eyebrow tags (brand-outline chips) */
.tags { display:flex; flex-wrap:wrap; gap:.5rem; }
.tag, .chip {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .6rem; border-radius:9999px;
  border:1px solid var(--tb-green);
  color: var(--tb-green-600);
  font-weight:600; font-size:.8125rem; line-height:1;
  background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition: background var(--tb-trans), color var(--tb-trans), border-color var(--tb-trans), transform .06s ease;
  text-decoration:none; cursor:pointer; /* make it feel clickable */
 
}
.tag:hover, .chip:hover  { background: var(--tb-green-50); transform: translateY(-1px); }
.tag:focus-visible, .chip:focus-visible{
  outline:2px solid transparent;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--tb-green) 25%, transparent);
}
.chip.is-active{background:var(--tb-green);border-color:var(--tb-green);color:#fff}
.chip:visited { color: var(--tb-green-600); }

@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  .tag:hover, .chip:hover { transform: none; }
}

.chip:active, .tag:active { transform: translateY(0); filter: brightness(0.98); }



/* Scenario strip (quiet chips) */
.scenarios { display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; }
.scenario{
  background:#f8faf9; color:#0f172a;
  border:1px solid #e5efe9; border-radius:9999px;
  padding:.4rem .7rem; font-size:.9rem; line-height:1;
}

/* Value grid + card accent */
.value-grid{
  display:grid; gap:1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; /* equal row heights */
}
@media (max-width: 1024px){ .value-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 680px){ .value-grid{ grid-template-columns: 1fr; } }

.value-card{
  display:flex; flex-direction:column;
  border:1px solid #e6e9ec; border-radius:12px;
  padding:1.125rem; background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}
.value-card:hover{
  transform: translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  border-color:#dde3e8;
}
.vc-title{ font-weight:600; }
.vc-title::after{
  content:""; display:block; width:28px; height:3px;
  background: var(--tb-green); border-radius:9999px; margin-top:.45rem;
  transition: width .12s ease;
}
.value-card:hover .vc-title::after{ width:40px; }
.vc-body{ margin-top:.55rem; color:#4b5563; line-height:1.55; font-size:.95rem; }

/* Remove underline on term headings’ anchor */
.term h3 a { text-decoration: none; }

/* Subtle brand highlight for inline <mark> */
mark {
  background: rgba(16,185,129,.12);
  padding: .05rem .25rem;
  border-radius: .25rem;
}

/* Nicer details summary cursor */
details > summary { cursor: pointer; }

/* Highlight glossary term when deep-linked or focused */
.term h3::after {
  content:""; display:block; height:3px; width:0;
  background: transparent; border-radius:9999px; margin-top:.45rem;
  transition: width .12s ease, background .12s ease;
}
.term:target h3::after,
.term:focus-within h3::after {
  width:36px; background: var(--tb-green);
}
.term:target,
.term:focus-within {
  border-color:#e0efe8;
  box-shadow:0 2px 0 rgba(0,0,0,.02), 0 8px 24px rgba(0,0,0,.05);
}

/* ============================================================
   Privacy page polish
   ============================================================ */
.policy-section { scroll-margin-top: 5rem; }
.policy-section:target {
  border-left: 3px solid var(--tb-green);
  padding-left: calc(1rem - 3px);
  box-shadow: 0 2px 0 rgba(0,0,0,.02), 0 8px 24px rgba(0,0,0,.05);
}

/* ============================================================
   Shared anchors / Demo / Playbook polish
   ============================================================ */
.anchor-section { scroll-margin-top: 5.5rem; }

/* chip active state (matches About/Privacy) */
.chip.is-active {
  border-color: var(--tb-green);
  background: var(--tb-green-50);
  color: var(--tb-green-900);
}

/* Code boxes + monospace areas */
.codebox, .codebox pre, .codebox code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875rem;
}
.codebox{
  max-height: 300px; overflow: auto;
  background:#f9fafb; border:1px solid var(--tb-border-soft);
  border-radius:.5rem; padding:.75rem;
}
.tb-mono{
  width:100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.875rem; line-height:1.45;
  border:1px solid var(--tb-border);
  border-radius:.5rem; padding:.75rem;
  resize:vertical; min-height:120px; background:#fff;
}

/* Copy buttons */
.copy-btn{
  font-size:.875rem;
  border:1px solid var(--tb-border);
  padding:.25rem .6rem;
  border-radius:.5rem;
  background:#fff;
  line-height:1.2;
  transition: border-color var(--tb-trans), color var(--tb-trans), transform var(--tb-trans);
}
.copy-btn:hover, .copy-btn:focus-visible{
  border-color: var(--tb-green);
  color: var(--tb-green-600);
  transform: translateY(-1px);
}

/* Playbook: sticky local nav */
.pillbar{
  position: sticky;
  top: 4rem; /* matches h-16 header */
  z-index: 30;
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,.85);
  padding: .25rem;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Demo: step titles + panels + segmented control */
.step-title{
  display:flex; align-items:center; gap:.6rem;
  font-size:1.25rem; line-height:1.75rem; font-weight:600;
}
.step-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.75rem; height:1.75rem; border-radius:9999px;
  background: rgba(16,185,129,.12);
  color: var(--tb-green, #10b981);
  font-weight:700; font-size:.95rem;
  border:1px solid var(--tb-border-soft);
}
.codepanel{
  border:1px solid var(--tb-border);
  border-radius:.75rem; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.03);
  overflow:hidden;
}
.codepanel-head{
  display:flex; align-items:center; gap:.5rem;
  padding:.55rem .75rem;
  background:#fafafa;
  border-bottom:1px solid var(--tb-border-soft);
}
.codepanel-title{ font-size:.9rem; font-weight:600; color:#111827; margin-right:auto }
.codepanel-head .copy-btn{ margin-left:.25rem }
.codepanel-body{ padding:.75rem }

.segmented{
  display:flex; gap:.3rem; background:#fff; padding:.15rem;
  border:1px solid var(--tb-border-soft); border-radius:.6rem;
}
.seg-pill{
  appearance:none; border:0; cursor:pointer; background:transparent;
  padding:.3rem .6rem; border-radius:.45rem; font-size:.8rem; line-height:1.1; color:#374151;
}
.seg-pill.is-active{ background: var(--tb-green); color:#fff; font-weight:600; }

/* Checklist ticks */
.checklist li{ display:flex; gap:.5rem; align-items:flex-start }
.checklist li::before{
  content:"✓"; color:var(--tb-green); font-weight:700; margin-top:.15rem; line-height:1;
}
@media (max-width: 640px){
  .codebox{ max-height:220px }
  .codepanel-head{ flex-wrap:wrap; gap:.4rem }
  .codepanel-head .copy-btn{ order:3 }
}

/* Demo: helper cards */
.hero-lead{ font-size: 1.0625rem; line-height: 1.6; color: #374151; }
.three-steps{
  border:1px solid var(--tb-border-soft);
  background:#fff; border-radius:.75rem;
  padding:.8rem .9rem; box-shadow:0 1px 0 rgba(0,0,0,.03);
  max-width:32rem;
}

/* from 5.5rem → closer to header height */
.anchor-section { scroll-margin-top: 4.25rem; }

/* Compact meta chips — md size */
.meta-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.34rem .6rem;            /* ↑ from ~.18 to give a ~28px height */
  min-height:28px;                 /* touch-friendly without feeling like cards */
  border:1px solid var(--tb-border);
  border-radius:.5rem; background:#fff; line-height:1;
}
.meta-k{
  font-size:.72rem; letter-spacing:.03em;
  text-transform:uppercase; font-weight:700; color:var(--tb-gray-600);
}
.meta-v{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.86rem;                /* was ~.78; slightly larger for scanability */
}




/* ============================================================
   Pre-pilot hardening adds
   ============================================================ */
.tb-modal[aria-hidden="true"] { display: none; }
.tb-modal{
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
}
.tb-modal__backdrop{
  position: absolute; inset: 0;
  background: rgba(17,24,39,.45);
}
.tb-modal__panel{
  position: relative;
  width: min(560px, calc(100% - 2rem));
  background: #fff;
  border: 1px solid var(--tb-border);
  border-radius: .75rem;
  padding: 1rem 1rem 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

/* Featured glossary term (green left rule) */
.term--featured{
  border-left: 4px solid var(--tb-green);
  padding-left: calc(1rem - 4px);
}

/* Footer micro-term */
.footer-micro{
  font-size: .8125rem; /* 13px */
  line-height: 1.5;
  color: #6b7280;      /* slate-500 */
}

/* ============================================================
   Tiny Pilot form niceties (radios)
   ============================================================ */
fieldset label{ display:flex; align-items:center; gap:.4rem; }
input[type="radio"]{ accent-color: var(--tb-green); }

/* keep code blocks contained */
.codebox{ max-width:100%; }
.codebox pre{ overflow-x:auto; white-space:pre; }

#decision-layer h2,
#decision-layer > div > p { text-align: center; }