:root{
  --good:#10b981; --good-bg:#ecfdf5;
  --ok:#f59e0b; --ok-bg:#fffbeb;
  --bad:#ef4444; --bad-bg:#fef2f2;
}
/* Alphabet buttons */
.nb-letter {
  background:#0078d4;          /* Google blue */
  color:#fff;                  /* White letters */
  border:1px solid #0078d4;
  border-radius:10px;
  padding:.45rem .2rem;
  font-weight:700;
  cursor:pointer;
  transition:.15s;
}

.nb-letter:hover,
.nb-letter:focus {
  background:#111827;          /* Slate (your existing hover) */
  color:#fff;
  border-color:#111827;
  outline:none;
}

/* Wrapper: thin mobile borders; wider on big screens */
.bn-wrap{ max-width:100%; margin:12px auto; padding:0 6px; border-left:1px solid #f1f5f9; border-right:1px solid #f1f5f9; }
@media (min-width:980px){  .bn-wrap{ max-width:1024px; padding:0 8px; border:none; } }
@media (min-width:1200px){ .bn-wrap{ max-width:1200px; padding:0 10px; } }

/* Cards */
.bn-card{ background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:12px; box-shadow:0 1px 6px rgba(0,0,0,.04); margin:10px 0; }
.bn-header .entry-title{ margin:0 0 .25rem; font-size:1.25rem; }
.bn-sub{ margin:.25rem 0 0; color:#475569; }

/* Categories */
.nb-categories{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:.6rem; }
.nb-categories label{ display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; }

/* Letter grid */
.nb-letter-grid{ display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:6px; margin-top:.25rem; }
@media (min-width:480px){ .nb-letter-grid{ grid-template-columns:repeat(10, minmax(0,1fr)); } }
@media (min-width:768px){ .nb-letter-grid{ grid-template-columns:repeat(13, minmax(0,1fr)); } }

.nb-letter{
  border:1px solid #e5e7eb; background:#0078d4; border-radius:10px;
  padding:.45rem .2rem; font-weight:700; cursor:pointer; transition:.15s;
}
.nb-letter:hover, .nb-letter:focus{ background:#111827; color:#fff; border-color:#111827; outline:none; }

/* Actions */
.nb-actions{ display:flex; gap:.5rem; margin:.6rem 0 .2rem; }
.nb-util{ background:#0078d4; color:#fff; border:1px solid #0078d4; border-radius:999px; font-weight:700; padding:.45rem .8rem; cursor:pointer; transition:.15s; }
.nb-util:hover, .nb-util:focus{ background:#111827; border-color:#111827; color:#fff; outline:none; }

.nb-pill {
  display: inline-block;
  background: #0078d4;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  margin: .5rem .25rem 0;
  font-weight: 600;
}
.nb-pill:hover {
  background: #111827;
}

/* Output */
.nb-output{ margin-top:.5rem; }
.nb-output strong{ color:#0f172a; }
.nb-breakdown-wrap{ margin-top:.35rem; }
#nb-breakdown{ list-style:none; padding:0; margin:.25rem 0 0; display:flex; flex-wrap:wrap; gap:.35rem; }
#nb-breakdown li{
  border:1px solid #e5e7eb; border-radius:999px; padding:.25rem .55rem; font-weight:700;
}

/* Interlink */
.nb-link{ margin-top:.5rem; }

/* Longform (comfortable reading) */
.bn-longform{ line-height:1.75; }

.bn-article h2{ margin-top:0 }
.bn-article h3{ margin:1rem 0 .5rem }
.bn-article p{ margin:.6rem 0 }

/* FAQ accordion */
.bn-acc{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.bn-acc-btn{
  width:100%;
  text-align:left;
  border:none;
  border-radius:10px;
  background:#0078d4;
  color:#fff;
  font-weight:700;
  padding:.7rem .9rem;
  cursor:pointer;
  transition:.15s;
}
.bn-acc-btn:hover, .bn-acc-btn:focus{
  background:#111827;
  color:#fff;
  outline:none;
}
.bn-acc-panel{
  overflow:hidden;
  max-height:0;                /* closed by default */
  transition:max-height .25s ease;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  margin-top:.35rem;
  padding:0 1rem;              /* minimal padding when closed */
}
.bn-acc-panel[data-open="1"]{
  padding:.7rem 1rem;          /* full padding only when open */
}
/* (removed) .bn-acc-item[aria-open="true"] .bn-acc-panel{ max-height:600px; } */

/* Chips (if you add rating chips later) */
.bn-chip{ display:inline-block; padding:.2rem .55rem; border-radius:999px; font-weight:700; border:1px solid transparent; line-height:1.1; }
.bn-chip-good{ color:var(--good); background:var(--good-bg); border-color:var(--good); }
.bn-chip-ok{ color:var(--ok); background:var(--ok-bg); border-color:var(--ok); }
.bn-chip-bad{ color:var(--bad); background:var(--bad-bg); border-color:var(--bad); }

/* Ads */
.bn-ad{ margin:10px 0; }
.bn-ad > ins.adsbygoogle{ display:block !important; max-width:100% !important; }
.bn-ad-fullbleed{ margin-left:-6px; margin-right:-6px; }
@media (min-width:980px){  .bn-ad-fullbleed{ margin-left:-8px; margin-right:-8px; } }
@media (min-width:1200px){ .bn-ad-fullbleed{ margin-left:-10px; margin-right:-10px; } }
.bn-ad-grid{ display:grid; gap:10px; }
@media (min-width:980px){ .bn-ad-grid{ grid-template-columns:1fr 1fr; } }

.nb-dob .nb-label{ font-weight:700; display:block; margin-bottom:.35rem; }
.nb-dob-grid{ display:grid; gap:.6rem; }
.nb-dob-field input[type="date"]{ padding:.45rem .6rem; border:1px solid #e5e7eb; border-radius:8px; }
.nb-dob-target label{ margin-right:1rem; }
.nb-dob-stats{ color:#374151; margin-top:.25rem; }

.nb-match{ margin:.35rem 0 .5rem; font-weight:700; }
.nb-match.is-ok{ color:#10b981; }    /* green */
.nb-match.is-off{ color:#ef4444; }   /* red */
.nb-pill{ display:inline-block; margin:.3rem .3rem 0 0; padding:.35rem .6rem; border:1px solid #e5e7eb; border-radius:999px; text-decoration:none; }

/* Utilities */
.bn-top{
  position:fixed; right:12px; bottom:12px; width:40px; height:40px; border-radius:999px;
  border:1px solid #e5e7eb; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.08);
  cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1;
}

/* --- Fix: keep pill text white on hover/focus/active and align borders --- */
.nb-pill,
.nb-pill:link,
.nb-pill:visited{
  background:#0078d4;
  color:#fff !important;
  border:1px solid #0078d4;
}

.nb-pill:hover,
.nb-pill:focus,
.nb-pill:active{
  background:#111827;
  border-color:#111827;
  color:#fff !important;   /* ensure contrast on black hover */
  outline:none;
}

.nb-pill:focus-visible{
  box-shadow:0 0 0 3px rgba(17,24,39,.25);
}

/* --- Mobile tap-friendly A–Z buttons (phones only; larger targets) --- */
@media (max-width: 479px){
  .nb-letter-grid{
    grid-template-columns: repeat(6, minmax(0, 1fr)); /* fewer columns → bigger cells */
    gap: 8px;
  }
  .nb-letter{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 1.2rem;   /* larger letter on phones */
    min-height: 52px;    /* thumb-friendly target */
    padding: 0;          /* height handled by min-height */
    border-radius: 12px; /* chunkier for touch */
    line-height: 1;      /* crisp centering */
  }
}

/* Guard: ensure tablet/desktop keep original sizing exactly */
@media (min-width: 480px){
  .nb-letter{
    font-size: inherit;       /* fallback to theme/browser default */
    min-height: 0;
    padding: .45rem .2rem;    /* your original padding */
    border-radius: 10px;      /* your original radius */
  }
}

/* Optional: remove tap highlight halo on mobile */
.nb-letter{
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Small polish */
#nb-preview{ font-weight:800; }
#nb-values{ font-weight:700; }
#nb-total{ font-weight:800; }