/* Ribbon (tool shortcuts) - appears under navbar and above main */
.site-ribbon{
  /* dark background, white text */
  background: #0f172a; /* very dark navy */
  border-bottom: 1px solid rgba(255,255,255,0.03);
  color: #fff;
}
.ribbon-inner{max-width:var(--nav-max-width);margin:0 auto;padding:0}
.ribbon-inner{display:flex;align-items:center}
.ribbon-list{display:flex;gap:0;list-style:none;margin:0;padding:0;align-items:center;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}
.ribbon-list::-webkit-scrollbar{display:none}
.ribbon-list li{flex:0 0 auto}
.ribbon-list a{
  display:inline-block;
  padding:.45rem .6rem;
  border-radius:0; /* square edges */
  background:transparent;
  color:#fff; /* white text */
  text-decoration:none;
  font-weight:400;
  border:1px solid rgba(255,255,255,0.04);
  transition: background .15s ease, transform .08s ease, color .15s ease;
}
.ribbon-list a:hover,
.ribbon-list a:focus{
  background: var(--color-primary); /* turn into primary on hover */
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
}
.ribbon-list a.active{
  background: var(--color-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(37,99,235,0.08);
}
.ribbon-list{-webkit-overflow-scrolling:touch;padding-bottom:0}

/* ribbon arrow controls */
.ribbon-arrow{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color: #fff;
  width:36px;height:36px;border-radius:8px;cursor:pointer
}
.ribbon-arrow:focus{outline:2px solid rgba(37,99,235,0.18);outline-offset:2px}
.ribbon-arrow-left{margin-right:.5rem}
.ribbon-arrow-right{margin-left:.5rem}

@media (max-width:720px){
  .ribbon-inner{padding:.35rem .8rem}
  .ribbon-list a{padding:.35rem .5rem;font-size:.95rem}
}