/* core/ui/nav/nav.css — COMMAND RAIL (EXACT MATCH to Experiment9) */

.command-rail{
  display:flex;
  align-items:center;
  justify-content:space-between;

  background:#dcdcdc; /* Metal Cabinet Color */
  padding:10px 16px;
  border:1px solid #999;
  border-bottom:4px solid #777;
  border-radius:2px;

  margin-bottom:40px;
  box-shadow:0 10px 20px rgba(0,0,0,0.3);

  position:relative;
  z-index:100;
}

/* End “screws” (Experiment uses ⊗). If you want X, change content to "×" */
.command-rail::before,
.command-rail::after{
  content:"⊗";
  color:#777;
  font-size:14px;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

.command-rail::before{ left:8px; }
.command-rail::after{ right:8px; }

.rail-brand{
  font-family:var(--font-label);
  font-weight:700;
  font-size:16px;

  letter-spacing:-0.5px;
  text-transform:uppercase;
  color:var(--ink);

  margin-left:20px;
  background:#fff;
  padding:2px 8px;
  border:1px solid #999;
  box-shadow:inset 1px 1px 2px rgba(0,0,0,0.1);
}

.rail-menu{
  display:flex;
  gap:12px;
  margin-right:20px;

  /* A) Always show all 5 buttons (tight rail) */
  flex-wrap:nowrap;
  align-items:center;
}

.rail-btn{
  display:flex;
  align-items:center;
  padding:6px 12px;

  background:#eee;
  border:1px solid #999;
  border-bottom:2px solid #777;

  font-family:var(--font-label);
  font-weight:700;
  font-size:11px;

  text-transform:uppercase;
  color:#555;

  text-decoration:none;
  transition:all 0.1s ease-out;
  border-radius:2px;

  white-space:nowrap; /* keep 5 buttons on one rail */
}

.rail-btn:hover{
  background:#fff;
  transform:translateY(-1px);
  color:#000;
}

.rail-btn:active{
  transform:translateY(1px);
  border-bottom-width:1px;
}

.rail-btn.active{
  background:var(--stamp);
  color:#fff;
  border-color:#800000;

  transform:translateY(1px);
  border-bottom-width:1px;
  pointer-events:none;
}

/* If the viewport is too narrow for 5, tighten instead of wrapping */
@media (max-width: 820px){
  .rail-menu{ gap:10px; }
  .rail-btn{ padding:6px 10px; font-size:10px; }
}
@media (max-width: 640px){
  .rail-btn{ padding:6px 8px; font-size:9px; }
}
/* =========================
   Responsive: stack nav buttons on small screens
========================= */
@media (max-width: 820px){
  .command-rail{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
  }

  /* keep end screws centered vertically with new height */
  .command-rail::before,
  .command-rail::after{
    top: 18px;
    transform: none;
  }

  .rail-brand{
    margin-left: 20px;
  }

  .rail-menu{
    margin-right: 0;
    margin-left: 20px;
    width: calc(100% - 40px);

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .rail-btn{
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 520px){
  .rail-menu{
    grid-template-columns: 1fr; /* stack all 5 */
  }
}
/* ============================================================
   CENTER NAV RAIL IN VIEWPORT
   ============================================================ */
#site-nav {
  width: 100%;
}

#site-nav > * {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}