/* TextToBinary.net — shared shell: header, mega-menu, footer, shared UI parts.
   Loaded on every page. Page-specific styles remain inline for fast first paint. */

:root{
  --tt-primary:#000;
  --tt-accent:#639246;
  --tt-accent-dark:#4e7a37;
  --tt-border:#e5e7eb;
  --tt-muted:#6b7280;
  --tt-surface:#f8f9fa;
  --tt-radius:10px;
  --tt-max:1120px;
}

/* ---------------------------------------------------------------- a11y */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--tt-primary);color:#fff;padding:12px 20px;
  border-radius:0 0 8px 0;font-size:.9rem;font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--tt-accent);outline-offset:2px}
/* Skip-link target: must not create a line box above full-bleed heroes. */
#tt-main{display:block;height:0;overflow:hidden}

/* ------------------------------------------------------------- header */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--tt-border);
}
.site-header__inner{
  max-width:var(--tt-max);margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:16px;min-height:60px;
}
.site-logo{
  display:flex;align-items:center;gap:9px;
  font-weight:800;font-size:1rem;letter-spacing:-.3px;
  color:var(--tt-primary);text-decoration:none;flex-shrink:0;
}
.site-logo:hover{color:var(--tt-accent-dark)}
.site-logo__mark{
  width:28px;height:28px;border-radius:7px;background:var(--tt-primary);
  color:#fff;display:grid;place-items:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:700;
}
.site-logo__mark span{line-height:1}

.site-nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.site-nav__item{position:relative}
.site-nav__link{
  display:inline-block;padding:10px 12px;border-radius:7px;
  font-size:.875rem;font-weight:600;color:#374151;text-decoration:none;
  white-space:nowrap;transition:background .15s,color .15s;
}
.site-nav__link:hover,.site-nav__link[aria-expanded="true"]{
  background:var(--tt-surface);color:var(--tt-primary);
}
.site-nav__link[aria-current="page"]{color:var(--tt-accent-dark)}
.site-nav__caret{display:inline-block;margin-left:4px;font-size:.6em;opacity:.6}

.site-nav__panel{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-4px);
  min-width:300px;background:#fff;border:1px solid var(--tt-border);
  border-radius:12px;box-shadow:0 16px 44px rgba(0,0,0,.13);
  padding:10px;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s,visibility .16s;
}
.site-nav__item:hover .site-nav__panel,
.site-nav__item:focus-within .site-nav__panel,
.site-nav__panel.is-open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.site-nav__panel a{
  display:block;padding:8px 12px;border-radius:7px;text-decoration:none;
  font-size:.85rem;color:#374151;line-height:1.45;
}
.site-nav__panel a:hover{background:var(--tt-surface);color:var(--tt-accent-dark)}
.site-nav__panel a b{display:block;font-weight:600;color:var(--tt-primary);font-size:.875rem}
.site-nav__panel a:hover b{color:var(--tt-accent-dark)}
.site-nav__panel--wide{min-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.site-nav__panel-head{
  grid-column:1/-1;padding:6px 12px 8px;font-size:.68rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tt-muted);
  border-bottom:1px solid var(--tt-border);margin-bottom:4px;
}
.site-nav__all{
  grid-column:1/-1;margin-top:4px;padding-top:8px;border-top:1px solid var(--tt-border);
}

.site-search{position:relative;flex-shrink:0}
.site-search input{
  width:170px;padding:8px 12px 8px 32px;border:1px solid var(--tt-border);
  border-radius:20px;font:inherit;font-size:.82rem;background:var(--tt-surface);
  color:#111;transition:width .2s,border-color .2s,background .2s;
}
.site-search input:focus{outline:none;width:220px;border-color:var(--tt-accent);background:#fff}
.site-search svg{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;opacity:.45;pointer-events:none;
}
.site-search__results{
  position:absolute;top:calc(100% + 8px);right:0;width:330px;max-height:380px;
  overflow-y:auto;background:#fff;border:1px solid var(--tt-border);border-radius:12px;
  box-shadow:0 16px 44px rgba(0,0,0,.13);padding:6px;display:none;z-index:120;
}
.site-search__results.is-open{display:block}
.site-search__results a{
  display:block;padding:8px 12px;border-radius:7px;text-decoration:none;
  color:#374151;font-size:.82rem;line-height:1.4;
}
.site-search__results a strong{display:block;color:var(--tt-primary);font-size:.86rem}
.site-search__results a:hover,.site-search__results a.is-active{background:var(--tt-surface)}
.site-search__empty{padding:14px;color:var(--tt-muted);font-size:.82rem;text-align:center}

.site-burger{
  display:none;margin-left:auto;background:none;border:1px solid var(--tt-border);
  border-radius:8px;width:38px;height:38px;cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.site-burger span{display:block;width:17px;height:2px;background:#111;position:relative}
.site-burger span::before,.site-burger span::after{
  content:"";position:absolute;left:0;width:17px;height:2px;background:#111;
}
.site-burger span::before{top:-5px}
.site-burger span::after{top:5px}

@media(max-width:900px){
  .site-burger{display:flex}
  .site-search{display:none}
  .site-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--tt-border);
    flex-direction:column;align-items:stretch;gap:0;padding:8px;
    max-height:75vh;overflow-y:auto;box-shadow:0 14px 30px rgba(0,0,0,.1);
  }
  .site-nav.is-open{display:flex}
  .site-nav__link{padding:12px 14px;font-size:.95rem}
  .site-nav__panel{
    position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;
    border:none;border-left:2px solid var(--tt-border);border-radius:0;
    min-width:0;margin:0 0 6px 14px;padding:0 0 0 6px;display:none;
  }
  .site-nav__panel--wide{grid-template-columns:1fr}
  .site-nav__panel.is-open{display:block}
  .site-nav__panel--wide.is-open{display:grid}
  .site-nav__panel-head{display:none}
}


/* ------------------------------------------------- contrast corrections
   #639246 on white is only 3.66:1, below WCAG AA for body text. These
   overrides load after every page's inline styles and darken the accent,
   the success/warning colours, and the text sitting on dark pillar heroes. */
:root{
  --secondary:#4e7a37;
  --secondary-dark:#3f6a2c;
  --success:#15803d;
  --warning:#b45309;
}
/* Only the dark (inverted) pillar heroes need light text; light heroes keep
   the page defaults. Detected by the black background those pages set. */
section.hero[class]:not(.hero--light) > p{opacity:1}
.tt-dark-hero p,.tt-dark-hero .img-credit,.tt-dark-hero .img-credit a{color:#e2e5e8}
.tt-dark-hero .img-credit,.tt-dark-hero .img-credit a{color:#c3c7cc}
.btn-primary{background:#4e7a37}
.btn-primary:hover{background:#3f6a2c}
/* --error was #ef4444: white on it is only 3.76:1 */
:root{--error:#c62828}
.remove-rule{background:#c62828}
/* Category badges: #4e7a37 on the pale green chip is 4.46:1, just short of AA */
.badge,.tag,.card-tag,.tool-keyword,
.tool-card .badge,.tool-card .tag,.tool-card .card-tag,
.tool-card .tool-keyword{color:#39602a}
/* Optional-field hints were #999 on the card background (2.7:1) */
label span,.optional{color:#5f6672}
/* Prose links must be distinguishable without colour (WCAG 1.4.1). Navigation,
   cards and buttons are excluded because they are not inside running text. */
p a,li a,dd a,td a{text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
.toc a,.toc li a,.site-footer li a,.site-nav a,.site-nav a b,.silo a,.mini,.card h3 a,
.tt-related__card,
.chip,.btn,.pillar-card,.tool-card,.card-link,.back-btn,.home-link a,.site-logo,
.footer-links a{text-decoration:none}
.toc a:hover,.site-footer li a:hover,.card h3 a:hover,.card-link:hover{
  text-decoration:underline}

/* --------------------------------------------------- shared components */
.tt-related{
  max-width:800px;margin:44px auto;padding:26px 24px;
  background:var(--tt-surface);border:1px solid var(--tt-border);border-radius:var(--tt-radius);
}
.tt-related > h2{
  font-size:1.05rem;font-weight:700;color:var(--tt-primary);
  margin:0 0 4px;padding:0;border:none;
}
.tt-related__intro{font-size:.85rem;color:var(--tt-muted);margin:0 0 16px}
.tt-related__grid{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:620px){.tt-related__grid{grid-template-columns:1fr 1fr}}
.tt-related__card{
  display:block;padding:13px 15px;background:#fff;border:1px solid var(--tt-border);
  border-radius:8px;text-decoration:none;transition:border-color .15s,transform .15s;
}
.tt-related__card:hover{border-color:var(--tt-accent);transform:translateY(-1px)}
.tt-related__card strong{display:block;font-size:.9rem;color:var(--tt-primary);margin-bottom:2px}
.tt-related__card span{font-size:.8rem;color:var(--tt-muted);line-height:1.5}
.tt-related__more{margin:16px 0 0;font-size:.85rem;color:var(--tt-muted)}
.breadcrumb a{text-decoration:underline;text-underline-offset:2px}
.tt-related__more a{color:var(--tt-accent-dark);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* footer */
.site-footer{
  background:#0b0b0c;color:#c7c9cc;margin-top:56px;
  padding:52px 20px 28px;font-size:.86rem;line-height:1.7;
}
.site-footer__inner{max-width:var(--tt-max);margin:0 auto}
.site-footer__grid{
  display:grid;grid-template-columns:1fr;gap:32px;
  padding-bottom:34px;border-bottom:1px solid #26272b;
}
@media(min-width:640px){.site-footer__grid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.site-footer__grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.site-footer h2{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;margin:0 0 14px;font-weight:700;border:none;padding:0;
}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0 0 8px}
.site-footer a{color:#c7c9cc;text-decoration:none;transition:color .15s}
.site-footer a:hover{color:#8dbb68;text-decoration:underline}
.site-footer strong,.site-footer b{color:inherit}
.site-footer__about p{margin:0 0 14px;color:#9ca0a6;max-width:34ch}
.site-footer__badges{display:flex;flex-wrap:wrap;gap:8px}
.site-footer__badge{
  display:inline-block;padding:4px 10px;border:1px solid #33353a;border-radius:20px;
  font-size:.72rem;color:#9ca0a6;
}
.site-footer__bottom{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  justify-content:space-between;padding-top:22px;font-size:.78rem;color:#7c8085;
}
.site-footer__bottom nav{display:flex;flex-wrap:wrap;gap:16px}
.site-footer__bottom a{text-decoration:underline;text-underline-offset:2px}

/* Links inside running prose must not rely on colour alone (WCAG 1.4.1).
   Navigation, cards and buttons keep their own treatment. */
article p a,article li a,article td a,article dd a,
section p a,section li a,section td a,section dd a,
.faq a,.takeaways a,.note a,.warn a,.sources a,.hint a,.credit a,
.tt-related__more a{
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;
}
article p a:hover,section p a:hover,.faq a:hover{text-decoration-thickness:2px}

/* shared editorial helpers used by the new pages */
.tt-callout{
  border-left:4px solid var(--tt-accent);background:#f2f7ee;
  padding:16px 20px;border-radius:0 8px 8px 0;margin:24px 0;
}
.tt-callout p:last-child{margin-bottom:0}
.tt-callout--warn{border-left-color:#f59e0b;background:#fff8eb}
.tt-callout--note{border-left-color:#3b82f6;background:#eff6ff}
.tt-updated{font-size:.8rem;color:var(--tt-muted)}
.tt-badge{
  display:inline-block;padding:3px 9px;border-radius:20px;background:#eef4e9;
  color:var(--tt-accent-dark);font-size:.72rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;
}
.tt-backtotop{
  position:fixed;right:18px;bottom:18px;width:42px;height:42px;border-radius:50%;
  background:var(--tt-primary);color:#fff;border:none;cursor:pointer;font-size:17px;
  display:none;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.24);z-index:90;
}
.tt-backtotop.is-visible{display:grid}
@media print{
  .site-header,.site-footer,.tt-backtotop,.tt-related,.skip-link{display:none!important}
}